Fallback for HTML5 date input

HTML5 is awesome. It gives us so many things that we previously had to do manually! Unfortunately, not all browsers support it yet.
Personally, I’m eager to use all the new features, but I don’t want to sacrifice browser support. For example, I don’t want to use jquery ui to render a date picker if a browser supports html5 <input type=”date”>.
Fortunately, you can check if a browser supports the HTML5 way, and use Jquery UI even if it doesn’t! I used Modernizr for this, and it’s quite awesome. As you can see, there are many many things it can detect, but for this particular instance, you can build a bundle with only “input types” (I might do a more extensive post on Modernizr later… hmmm).

First of all, build a Modernizr bundle with the options you want (or just “input types” like me) and download the resulting .js file. Assuming you already have jquery ui installed, your code should look like this


    
        
        
        
    
    
        
        
        
        
        
    

Which will work fine, but I still prefer the native datepicker where available. This is where Modernizr comes in handy! First of all, load the Modernizr script as well.

        

You can now use the date input type like you usually would:

        

As long as you also add this somewhere in your javascript code:


That easy! Now if the date input type isn’t supported, all your <input type=”date”> will automatically use the jquery ui datepicker. Additionally, you will automatically have the native solution when these browsers start supporting it, without you having to change anything else in the future.

(altogether, the code should look like this):


    
        
        
        
    
    
        
        
        
        
         
    

Native datepicker in chrome:

native date input

Jquery ui datepicker in firefox:

jquery ui date picker

That’s all for now! (Should I blog about modernizr more…? Let me know on twitter (@errietta) :p)

‘Till next time!

3 thoughts on “Fallback for HTML5 date input

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.