TimePicker for CSHTML5 w/ MVVM Support

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

TimePicker for CSHTML5 w/ MVVM Support

Postby TaterJuice » Mon Nov 06, 2017 9:30 am

A NATIVE HTML5 TimePicker for CSHTML5 (http://cshtml5.com/)

This uses the input[type=Time] (-webkit-Timepicker), as defined by Moz MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/Time

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

- Input-Mask (and EDGE popup) DO NOT work in Simulator! (Simulator does not appear to support webkit timepicker)
- 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-timepicker appearance on input[type=Time])
* Firefox is working to implement input[type=time], 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.

Source Download (+ Sample Project):

DLL Direct Download:

Google CHROME Desktop & OPERA Desktop Screenshot:
In Chrome/Opera the time control is simple, with slots to enter hours and minutes in 12-hour format, and up and down arrows to increment and decrement the currently selected component. An "X" button is provided to clear the control's value.

Microsoft EDGE Screenshot:
The Edge time control is somewhat more elaborate, opening up hour, minute, and AM\PM pickers with sliding reels, as well as "OK" and "Cancel" buttons, denoted by a Checkmark, and "X", respectively.

Mozilla Firefox NIGHTLY BETA Screenshot:
Firefox's time control is very similar to Chrome's, except that it doesn't have the up and down arrows.

CHROME on Android Screenshot:
The TimePicker control in Chrome for Android displays a full clock, with hands for both Minutes and Seconds, and an AM\PM toggle. It also has "Clear", "Set" and "Cancel" commands.


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

Code: Select all


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

Code: Select all


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

Code: Select all

   Time="{Binding Path=Time, Mode=TwoWay}">
   <control:TimePicker.DataContext><!-- OPTIONAL -->
      <presenter:TimePresenter />

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

Re: TimePicker for CSHTML5 w/ MVVM Support

Postby JS-Support @Userware » Tue Nov 07, 2017 1:21 am

Awesome!! Thanks a lot TaterJuice!
(We are looking into the possibilitiy to fix the Simulator to add support for the webkit timepicker)

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

Re: TimePicker for CSHTML5 w/ MVVM Support

Postby TaterJuice » Tue Nov 07, 2017 2:59 pm

Awesome, that would be great for debugging!
Right now, I have to use browser-developer tools and MessageBox.Show(msg) to step through the datepicker and timepicker code in browser, because I can't test it in the simulator. Does the simulator use IE11 shell, or a proprietary wrapper of some kind? If it uses the IE11\Explorer shell, you may be able to migrate to the EDGE shell.
Either way, thanks for the feedback! I'm looking forward to continuing work on libraries for CSHTML5.

Return to “Extensions and Plugins for CSHTML5”

Who is online

Users browsing this forum: No registered users and 5 guests