INPUT[TYPE=DATE] IN GOOGLE CHROME WITH MVC

If you'd like to apply jQuery Datepicker or another JS calendar library on all platforms, use input[type=text] instead of input[type=date]. This is the best way to ensure a consistent UI since different browsers which have support for input[type=date] do it in different ways.

You can use Modernizr or your own check to see if the browser supports this input type and then either let it use native or use a JS library.

$(function () {
    var isDateInputSupported = function () {
        var elem = document.createElement('input');
        elem.setAttribute('type', 'date');
        elem.value = 'foo';
        return (elem.type == 'date' && elem.value != 'foo');
    }

    if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
    {
        $('input[type=date]').datepicker
         ({
            dateFormat: "mm/dd/yy",
            showStatus: true,
            showWeeks: true,
            highlightWeek: true,
            numberOfMonths: 1,
            showAnim: "scale",
            showOptions: {
                origin: ["top", "left"]
            }
         });
    }
});

EditorTemplates
DateTime.cshtml

@model Nullable<System.DateTime>
@if (Model.HasValue)
{
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}", Model.Value), new { placeholder = "MM/DD/YYYY" })
}
else
{
    @Html.TextBox("", null, new { placeholder = "MM/DD/YYYY" })
}
@{
    string name = ViewData.TemplateInfo.HtmlFieldPrefix;
    string id = name.Replace(".", "_");
}
<script type="text/javascript">
    $(function () {

        var _gotoToday = $.datepicker._gotoToday;
        // make a new _gotoToday function that does what the old one
        // did, but adds some extra feature
        $.datepicker._gotoToday = function (id) {
            _gotoToday.call(this, id);
            var target = $(id),
         inst = this._getInst(target[0]);

            //Added by Ryan Waterer on 1/30/2009 to have it return 
            // the value when the person selects the "Today" button
            this._selectDate(id, this._formatDate(inst,
         inst.selectedDay, inst.drawMonth, inst.drawYear));
            $("#@id").blur();
        }

        $("#@id").datepicker
            ({
                dateFormat: "mm/dd/yy",
                showStatus: true,
                showWeeks: true,
                highlightWeek: true,
                numberOfMonths: 1,
                showAnim: "scale",
                showButtonPanel: true,
                showOptions: {
                    origin: ["top", "left"]
                }
            });
    });
</script>

Model Class

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Start Date")]
public Nullable<DateTime> start_date { get; set; }