Read more

Date or datetime picker for touch devices

Henning Koch
January 04, 2012Software engineer at makandra GmbH

jQuery UI's date picker Show archive.org snapshot and date time picker Show archive.org snapshot doesn't work on touch interfaces.

Solution 1: Use Mobiscroll

Illustration book lover

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

  • Introduce design conventions for controllers and user-facing models
  • Create a system for growth
  • Build applications to last
Read more Show archive.org snapshot

Another way is to detect touch devices and for those devices use the Date and DateTime picker from Mobiscroll Show archive.org snapshot instead:

if (isTouchDevice()) {
  $('.date_picker').scroller();
} else {
  $('.date_picker').datepicker();
}

Mobiscroll uses a spinning wheel UI for picking dates and times, as known from iOS (see the demo Show archive.org snapshot ). It works okayish, but doesn't feel quite as good as the native scroller from iOS.

Also see German localization for Mobiscroll.

Solution 2: Pimp the date time picker with the slider access option

Modern versions of the jQuery UI date time picker Show archive.org snapshot come with an additional file jquery-ui-sliderAccess.js. This adds plus/minus buttons next to the hour and minute sliders.

After including the file, activate it like this:

$('datetime_picker').datetimepicker({
  addSliderAccess: true
});

By default, the plus/minus buttons will only appear for touch devices. To always have them, say something like:

$('datetime_picker').datetimepicker({
  addSliderAccess: true,
  sliderAccessArgs: { touchonly: false }
});
Posted by Henning Koch to makandra dev (2012-01-04 12:48)