TimePicker for CSHTML5 w/ MVVM Support

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

TimePicker for CSHTML5 w/ MVVM Support

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

Vivrant.TimePicker
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

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

Limitations:
- 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):
https://github.com/taterjuice/Vivrant.TimePicker

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

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.
Image

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.
Image

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.
Image

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.
Image

Usage:

- Add a reference to Vivrant.TimePicker.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.TimePicker"

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

Code: Select all

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

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

Code: Select all

<control:TimePicker
   Margin="16"
   VerticalAlignment="Top"
   HorizontalAlignment="Center"
   Time="{Binding Path=Time, Mode=TwoWay}">
   <control:TimePicker.DataContext><!-- OPTIONAL -->
      <presenter:TimePresenter />
   </control:TimePicker.DataContext>
</control:TimePicker>

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)

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

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 1 guest