Motivated by Rachel Appel’s terrific blog post Create user friendly date fields with ASP.NET MVC EditorTemplates & jQueryUI, I created a full featured article on the topic. You can find my article here.  In addition to the great information Rachel provided, I gleaned good ideas from comments left on Rachel’s blog, such as how to handle null date values. Super Microsoft PM Damian Edwards provided JavaScript to detect full HTML5 calendar support. As of this writing, only Opera supports an HTML5 popup calendar.

I use the following JavaScript to detect whether the browser supports the HTML5 date input type. If it doesn’t (which is currently true of every browser except Opera), it uses the jQuery UI pop-up calendar.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

As of this writing, Google Chrome picks up the HTML5 date input type and displays an up and down widget (which changes the date up or down by one day per click).

ChromeHtml5

Modernizr correctly returns false for Chrome (that is, Chrome doesn’t fully support the HTML5 date input type). Damien to the rescue again. He sent me the following script to clean up Chrome and any future browser releases that only partially support the HTML5 date input type.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

The  above script changes the HTML5 type attribute from date to text when full HTML5 date support is not provided. Using this script, Chrome won’t display the lame up and down widget.

Further testing revealed that when I edited Rio Bravo (released in 1959) from my movie list, the HTML5 calendar came up 2011, not the expected 1959. Not wanting to click back 52 years, I pinged Damien again, who promptly whipped out this script and posted it to jsFiddle. His script uses the date value to set the date of the calendar .

Please leave feedback on my jQuery/HTML5 calendar tutorial so I can continue to improve the sample.

Special thanks to Rachel, Damien, Scott Hanselman and Brad Wilson for their input and help.