CSS & JS (webkit) DatePicker for CSHTML5 (http://cshtml5.com/)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Vivrant.DatePicker.Sample
Vivrant.DatePicker
README.md
Vivrant.DatePicker.sln

README.md

Vivrant.DatePicker

A NATIVE CSS & webkit DatePicker for CSHTML5 (http://cshtml5.com/)

This uses 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

Credits

BASED ON "Pure CSS DatePicker" by Mahesh: https://codepen.io/maheshambure21/pen/VYJQYG

Milestones:

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

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])

Usage:

  • Add a reference to Vivrant.DatePicker.dll

  • Create a new XAML window or Control

  • Add a XAML Namespace for the control:

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

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

    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)

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