Date or datetime picker for touch devices

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

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

Copyif (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:

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

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

Copy$('datetime_picker').datetimepicker({
  addSliderAccess: true,
  sliderAccessArgs: { touchonly: false }
});