Responsive jQuery Date Time Picker for Mobile

Written by Kevin Liew on 02 Mar 2015
51,155 Views • Javascript

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
Join the discussion

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.