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';
  • @sonicthoughts did that work for you?
    – Coleman
    Aug 11 '15 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.