javascript - Why is my date input not reading the model value? -

i'm server side guy trying teach myself bit of css, javascript, jquery etc. have written little test project loads model , displays values in simple text boxes. works ok, can see:

but of course, want display dates appropriately. let me change input types "date". here's razor code:

@html.textboxfor(m => m.date, new { @type="date", @id="ondate" }) 

well, worked.... sort of. mean, displays date picker... it's no longer displaying model's date!

what doing wrong?

the type="date" attribute renders browsers html5 datepicker. in order work correctly, format needs yyyy-mm-dd (iso format), needs be

@html.textboxfor(m => m.date, "{0:yyyy-mm-dd}", new { @type="date" }) 

alternatively can set data attributes on property

[datatype(datatype.datetime)] [displayformat(applyformatineditmode = true, dataformatstring = "{0:yyyy-mm-dd}")] public datetime date { get; set; } 

and use

@html.editorfor(m => m.date) 

which adds type="date" attribute , uses correct format.

side notes:

1. the html5 datepicker supported in recent versions of chrome
2. using editorfor() (in mvc-4) not allow set id attribute, not clear why need change default id="date" id="ondate"