CODEWITHSUNDEEP
asp.netgoogle-chromeinternet-explorer
JQuery
JQuery

Reputation: 905

I.E vs Chrome display differences

Just wondering if there is any information about on some difference between Chrome and I.E when rendering some displays from an ASP.NET mvc web app.

For example

[DataType(DataType.Date, ErrorMessage = "Incorrect format or missing date")]
[DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
public DateTime? StartDate { get; set; }

in I.E it is just a plain white box to enter characters where as chrome displays dd/mm/yyyy and keeps that format.

Same with time:

[DataType(DataType.Time, ErrorMessage = "Incorrect time")]             
//[RequiredIfTrue("MondayTrue", ErrorMessage ="Day has been marked as working")]
public DateTime? MondayStart { get; set; }

plain white box in I.E where as chrome has it --:--

Is there a way to get these attributes to work in I.E?

I.e html line

<input name="StartDate" class="div-form-control text-box single-line" id="txtStartDate" type="date" value="" data-val-date="The field StartDate must be a date." data-val="true">

chrome html line

<input class="div-form-control text-box single-line" data-val="true" data-val-date="The field StartDate must be a date." id="txtStartDate" name="StartDate" type="date" value="">

should have added, im using I.E 11 so thought this would have worked.

in my MVC layout page,

these partial views are rendered in the detailview div:

<div class="containerBody">
    <div id="detailView"></div>       
</div>

View 

 <div style="display: table-row;">               
                <div class="div-label-text" , style="display: table-cell"> @Html.LabelFor(model => model.StartDate) </div>
                <div class="div-EditorFor" , style="display: table-cell"> @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "div-form-control", id = "txtStartDate" } }) </div>
                <div class="div-val-cell" , style="display: table-cell"> @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" }) </div>
            </div>

Upvotes: 0

Views: 998

Answers (2)

Mahesh Kava
Mahesh Kava

Reputation: 791

How are you rending the view model property? If you use @Html.EditorFor, it would output input type="date", which is not supported by non html5 compliant old browsers and IE. Take a look here caniuse to review date and time input field compatibility across browsers. I would suggest using Jquery date picker

Upvotes: 1

matt_lethargic
matt_lethargic

Reputation: 2796

This depends on which version of IE you are using. Older IE versions don't support type="date" as its an HTML 5 attribute. Chrome's support for HTML 5has always been better. Check out http://blogs.artinsoft.net/Mrojas/archive/2013/01/30/The-inputtype=date-in-Internet-Explorer-%28IE%29-9-and-10.aspx

BTW, those bits of HTML are written the same in both browsers, the difference is how its rendered.

Upvotes: 1

Related Questions