DatePicker for CSHTML5 w/ MVVM Support

[TaterJuice]

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:



Microsoft EDGE Screenshot:


Mozilla Firefox NIGHTLY BETA Screenshots:



CHROME on Android Screenshot:


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]

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?

[JS-Support @Userware]

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