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