I like the datepicker UI, but many people don't.

We require date of birth on a few forms. Each week I get at least one complaint that someone can't fill out the form on a mobile. Not sure if a bug or user error. I think the easiest thing is to disable it for mobiles. Ideally, have an icon to trigger it.

I was wondering if there is a clever /safe way to use css for this so we can use @media queries to disable for mobile devices.

I was experimenting with

#ui-datepicker-div { z-index: -9999; display: none!important; }

which seems to work, but disables validation. Looking for any other keen ideas.


To use the native datepicker of the mobile device, the field needs to have type="date". So your code to disable the datepicker popup and use the native device's instead might look like:

(function($) {
  $.ui.datepicker.prototype.options.focus = "button";

  $(document).on('crmLoad', function($region) {
    $('input.dateplugin', $region).each(function() {
      this.type = 'date';
| improve this answer | |
  • @sonicthoughts did that work for you? – Coleman Aug 11 '15 at 14:30

Your Answer

