Responsive jQuery Date Time Picker for Mobile

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

• TAGS:
• jQuery
• Plugin