Recently I was working on a project - a mobile version of a website, and one of the requirements is to use native HTML5 date and time pickers. With all the modern mobile platforms, I thought it will be very easy task, simply apply date and time in input type attributes.
I was wrong, I found out Microsoft Windows Mobile IE, it does not support it at all. Even the IE 11 desktop version does not support too. W.T.H... IE did it again.
So, I started to search for Javascript date and time picker solution. While there are many good date pickers, it's so difficult to find a good time picker that doesn't suck at UI.
In the end, I found this - jQuery DateTimePicker. I actually prefer standard calendar UI for datepicker, but I like the time picker a lot, so I implemented it on the mobile website.
My Solution
I use Modernizr to detect input date and time support. If the browser doesn't support it, load the DateTimerPicker. So in this case, iOS and Android will use the native date & time support whereas Mobile IE will use Javascript solution.
if (!Modernizr.inputtypes.date) { $("#dtBox").DateTimePicker({ dateFormat: "yyyy-MM-dd" }); }
DateTimePicker.js
There are many configurable options, if you look at the examples included in the download file, it will show you event handler too.
- Different mode - date, time, date & time
- default date
- date separator
- time separator
- date time format
- Max & min dates
- Max & min times
- Customisable title, button and animation.
SPECIFICATIONS & DOWNLOAD
- Official Website / Demo / Download
- Plugin Category: Date & Time
- Requirement: jQuery Library
- Compatibility: Chrome, Firefox, Safari, Opera, IE 9+, Android 2.3+, iOS 6+, Windows Phone 8
- License: MIT License
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.