Click here to Skip to main content
14,636,439 members
Articles » Web Development » ASP.NET » Howto
Posted 1 May 2013


8 bookmarked

How to make date visible in Chrome native datepicker while it binds from Model in MVC4

Rate this:
5.00 (3 votes)
Please Sign up or sign in to vote.
5.00 (3 votes)
1 May 2013CPOL
This helps to make a visible date field in Chrome native datepicker while it will bind from the Model in ASP.NET MVC 4.


When we want to bind a date field from Model to View in MVC4 and try to see it in Chrome, it will not display the date while it works fine with Internet Explorer. So this tip will help you to resolve this problem.

Using the Code

Suppose you have a property StartDate in your model:

public DateTime StartDate 

Now if you have a view with the following code to edit StartDate and here I am using the Html.EditorFor helper class so this helper class by default generates the input field with type date.

<div class="editor-label">
    <%: Html.LabelFor(model => model.StartDate) %>
<div class="editor-field">
    <%: Html.EditorFor(model => model.StartDate) %>
    <%: Html.ValidationMessageFor(model => model.StartDate) %>

It will not show the date in Chrome as you can see in the screenshot.

Image 1

The reason behind this is that when we add a property in the model with annotation [DataType( DataType.Date)], then ASP.NET MVC4 by default generates an input field with type="date" and Chrome has supported HTML5 so it will render as a date picker which is supported by the default format of date like "yyyy/mm/dd".

So we need to change the format of date in the model itself by giving the following annotation:

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")] 

So finally, the model Property will look like:

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime StartDate

Points of Interest

I did a lot of experiments to find this solution. I know there are a lot of ways to achieve this, but I find this method most easy and fruitful, that's why I shared it with all.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Abhishek Kumar Goswami
Software Developer
India India
I like to code and I really enjoy to share my knowledge with all, Its my passion.

Comments and Discussions

Questionhow to display dd/MM/yyyy format? Pin
sukeshchand30-Sep-14 20:57
professionalsukeshchand30-Sep-14 20:57 
AnswerRe: how to display dd/MM/yyyy format? Pin
Abhishek Kumar Goswami4-Oct-14 8:24
professionalAbhishek Kumar Goswami4-Oct-14 8:24 
make a change like "{0:dd/MM/yyyy}"

Let me know if problem persist
Abhishek Goswami

GeneralRe: how to display dd/MM/yyyy format? Pin
sukeshchand5-Oct-14 19:17
professionalsukeshchand5-Oct-14 19:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.