CODEWITHSUNDEEP
asp.net-mvc-4
NitinV
NitinV

Reputation: 11

MVC datetime field has different appearance in chrome

I developed an MVC 4.0 app using VSTS 2012 and .Net 4.0. I've created a class with a date type property as below

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
[DisplayName("Start Date")]
public DateTime StartDate { get; set; }

And in view, I am populating this property as below

<div class="col-md-4 col-md-pull-1">
     @Html.EditorFor(model => model.StartDate)
     @Html.ValidationMessageFor(model => model.StartDate)
</div>

When I see that in IE, it displays it correctly and on clicking text box I can see date box but when I test that in Chrome, I see a weird 'up-down arrow' along with a down arrow for date drop down. I am using IE 10 and Chrome 29 on windows 7. Does anyone have any idea why this different behavior and how to resolve that?

In IE

This is from IE

In Chrome

This is from Chrome

Upvotes: 1

Views: 70

Answers (1)

Saranga
Saranga

Reputation: 3228

@Html.EditorFor(model => model.StartDate) will render as <input ... type="date" .../> in HTML.

It is a HTML 5 input type and it will display differently in diffrent browsers.

You can try Jquery Date Picker for cross browser functionality.

Upvotes: 1

Related Questions