Answers.Body: <p>To use the native datepicker of the mobile device, the field needs to have <code>type="date"</code>. So your code to disable the datepicker popup and use the native device's instead might look like:</p>
  
  <pre><code>(function($) {
    $.ui.datepicker.prototype.options.focus = "button";
  
    $(document).on('crmLoad', function($region) {
      $('input.dateplugin', $region).each(function() {
        this.type = 'date';
      });
    });
  })(CRM.$);
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-11T14:30:27.770Z
Answers.Text: @sonicthoughts did that work for you?
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-08-06T15:36:56.753Z
Answers.LastActivityDate: 2015-08-06T15:36:56.753Z
Answers.UserDisplayName: Coleman
Body: <p>I like the datepicker UI, but many people don't.</p>
  
  <p>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.  </p>
  
  <p>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.</p>
  
  <p>I was experimenting with </p>
  
  <p>#ui-datepicker-div {
  z-index: -9999;
  display: none!important;
  }</p>
  
  <p>which seems to work, but disables validation.  Looking for any other keen ideas.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-08-05T22:41:11.587Z
Comments.Text: I did find a way to disable popup on focus: http://api.jqueryui.com/datepicker/#option-showOn .
Comments.UserDisplayName: Sonicthoughts
Tags: <javascript><date-preferences><css>
Title: How to disable datepicker UI for a mobile device
ThreadText: # How to disable datepicker UI for a mobile device
  
  (Asked by: username_0 on 2015-08-05)
  
  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.
  
  **Tags:** javascript, date-preferences, css
  
  > **Comments:**
  > **username_0**: I did find a way to disable popup on focus: http://api.jqueryui.com/datepicker/#option-showOn .  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-08-06. Score: 2 | Accepted answer
  
  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';
      });
    });
  })(CRM.$);
  
  ```
  
  > **Comments:**
  > **username_1**: @username_0 did that work for you?  
  
  ---
  
  