Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You have a couple of different options.</p> <p>You could detect that the user is using Chrome by sniffing the user agent string and preventing click events.</p> <pre><code>if (navigator.userAgent.indexOf('Chrome') != -1) { $('input[type=date]').on('click', function(event) { event.preventDefault(); }); } </code></pre> <p><a href="http://css-tricks.com/browser-detection-is-bad/" rel="noreferrer">User agent sniffing is a bad idea</a>, but this will work.</p> <p>The ideal approach in my mind is to detect whether the browser supports a native datepicker, if it does use it, if not use jQuery UI's.</p> <pre><code>if (!Modernizr.inputtypes['date']) { $('input[type=date]').datepicker({ // Consistent format with the HTML5 picker dateFormat: 'yy-mm-dd' }); }​ </code></pre> <p>Example - <a href="http://jsfiddle.net/tj_vantoll/8Wn34/" rel="noreferrer">http://jsfiddle.net/tj_vantoll/8Wn34/</a></p> <p>Of course since Chrome supports a native date picker the user would see that instead of jQuery UI's. But at least you wouldn't have a clash of functionality and the UI would be usable for the end user.</p> <p>This intrigued me so I wrote up something about using jQuery UI's datepicker alongside the native control - <a href="http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/" rel="noreferrer">http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/</a>.</p> <h2><strong>Edit</strong></h2> <p>If you're interested, I recently gave a talk on using jQuery UI's widgets alongside HTML5 form controls.</p> <ul> <li><a href="http://tjvantoll.com/speaking/slides/UI-Widgets-vs-HTML5/Sofia/" rel="noreferrer">Slides</a></li> <li><a href="http://www.youtube.com/watch?v=Q6Bjs4BoBTc" rel="noreferrer">Video</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload