DatePicker for CSHTML5 w/ MVVM Support

TaterJuice
Posts: 147
Joined: Thu Mar 16, 2017 5:40 am
Contact:

DatePicker for CSHTML5 w/ MVVM Support

Postby TaterJuice » Fri Nov 03, 2017 10:59 am

Vivrant.DatePicker
A NATIVE HTML5 DatePicker for CSHTML5 (http://cshtml5.com/)
This uses CSS+webkit on the input[type=date] (-webkit-datepicker), as defined by Moz MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Milestones:
- 11-03-2017: Initial Release
Tested against CSHTML5 BETA 12.4

Additional Credits:
Based On Pure CSS DatePicker by Mahesh: https://codepen.io/maheshambure21/pen/VYJQYG

Limitations:
- Input-Mask and Calendar popups DO NOT work in Simulator! (Simulator does not appear to support webkit calendar)
- Works in Microsoft Edge, Google Chrome, Opera, Chrome on Android and Firefox BETA*
- Does not work in Firefox Public Release or IE11 (Firefox* and IE have not yet implemented the -webkit-calendarpicker appearance on input[type=date])
* Firefox is working to implement inputType=date, but it is currently only supported in the current Firefox BETA, available here: https://www.mozilla.org/en-US/firefox/quantum/. You must download the latest Nightly BETA from Mozilla. For more information on Mozilla Firefox's adaption of the -webkit-datepicker, please see Firefox Bug 825294 https://bugzilla.mozilla.org/show_bug.cgi?id=825294 and Firefox bug 888320 https://bugzilla.mozilla.org/show_bug.cgi?id=888320.

Source Download (+ Sample Project):
https://github.com/taterjuice/Vivrant.DatePicker

DLL Direct Download:
https://www.dropbox.com/s/zboo086pg5al2jj/Vivrant.DatePicker.zip?dl=0

Google CHROME Desktop & OPERA Desktop Screenshots:
Image
Image

Microsoft EDGE Screenshot:
Image

Mozilla Firefox NIGHTLY BETA Screenshots:
Image
Image

CHROME on Android Screenshot:
Image

Usage:

- Add a reference to Vivrant.DatePicker.dll
- Create a new XAML window or Control
- Add a XAML Namespace for the control:

Code: Select all

xmlns:control="clr-namespace:Vivrant.Controls;assembly=Vivrant.DatePicker"

- (OPTIONAL) Use the included DatePresenter class for out-of-the-box MVVM support:

Code: Select all

xmlns:presenter="clr-namespace:Vivrant.Presenter;assembly=Vivrant.DatePicker"

- Add the the following to your window or Control (this can replace any existing Canvas or Grid objects)

Code: Select all

<control:DatePicker
    Margin="16"
    VerticalAlignment="Top"
    HorizontalAlignment="Center"
    DateValue="{Binding Path=Date, Mode=TwoWay}">
    <control:DatePicker.DataContext>
        <presenter:DatePresenter />
    </control:DatePicker.DataContext>
</control:DatePicker>

zemorango
Posts: 36
Joined: Tue Feb 02, 2016 6:30 am

Re: DatePicker for CSHTML5 w/ MVVM Support

Postby zemorango » Sat Nov 04, 2017 4:43 am

Very good TarterJuice, great job :)
But it's a shame that it has to be an user and not the C#html5 team to do it, I can not understand why a paid service do not have such a component, or a treeview or an accordion , or a calendar,
Isn't the goal of this framework to use C# and XAML instead of javascript? So why there is so few xaml components? :shock:

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: DatePicker for CSHTML5 w/ MVVM Support

Postby JS-Support @Userware » Mon Nov 06, 2017 1:07 am

Awesome!!!
Thank you very much TaterJuice.
We are going to improve the Simulator so as to fix the outstanding issues.
Regards,


Return to “Extensions and Plugins for CSHTML5”

Who is online

Users browsing this forum: No registered users and 1 guest