ASP MVC DateTime Validation Issue in IE9

Question

I am working on fixing a bug on an application that is developed with ASP.NET MVC Razor and Angular.

The problem is that in IE9 the datetime value does not get displayed at all in the input box.

I have tracked it down to a "required" that it keeps adding required="required".

The IncidentDate property in the model is nullable datetime.

 public System.DateTime ? IncidentDate { get; set; }

It works fine in IE10+,FF and Chrome but in IE 9 DateTime is not displaying at all.

If I edit markup html and remove required tag than the DateTime value appears in the input box.

I tried adding the following line in application_start still same issue:

ModelValidatorProviders.Providers.Clear();
ModelValidatorProviders.Providers.Add(new DataAnnotationsModelValidatorProvider());

Here is the markup that is generated in IE

<input name="Incident.IncidentDate" class="form-control ng-valid ng-isolate-scope input-validation-error ng-touched ng-dirty ng-valid-parse" id="Incident_IncidentDate" aria-invalid="true" aria-required="true" aria-describedby="Incident_IncidentDate-error" type="text" placeholder="dd/mm/yyyy h:mm am/pm" value="22/09/2015 2:00:00 PM" ng-model="model.Incident.IncidentDate" use-datepicker="true" format="DD/MM/YYYY hh:mm a" date-time-picker="" data-val-required="The Date and time of  incident field is required." data-val="true" use-timepicker="true" data-val-daterange-min="1753-01-01T00:00:00" data-val-daterange-max="9999-12-31T23:59:59" data-val-daterange="The field Date and time of incident is invalid.">

If anyone has a solution to this please let me know. Thank you.

Digging bit deeper I found there is a custom datetime editor template. I started debugging it and seems when I do not add attributes it works fine in IE 9

DateTime? value = null;
if (ViewData.Model != null)
{
    value = ViewData.Model as DateTime?;
}

bool? datePicker = ViewData["datePicker"] as Nullable<bool> ?? true;
bool? timePicker = ViewData["timePicker"] as Nullable<bool> ?? false;
bool? showFormat = ViewData["showFormat"] as Nullable<bool> ?? true;

bool? small = ViewData["small"] as Nullable<bool> ?? false;
string groupClass = small.Value ? "input-group input-group-sm" : "input-group";

IDictionary<string, object> htmlAttributes = ViewData["htmlAttributes"] == null ? new Dictionary<string, object>() : ViewData["htmlAttributes"].ToDictionary();

string inputName = htmlAttributes.ContainsKey("Name") ? htmlAttributes["Name"].ToString() : Html.NameForModel().ToString();
string ngModel; 
if (!htmlAttributes.ContainsKey("ng-model"))
{
    ngModel = "model." + inputName;
    htmlAttributes.Set("ng-model", ngModel);
}
else
{
    ngModel = htmlAttributes["ng-model"] as string;
}
htmlAttributes.Set("Name", inputName);
htmlAttributes.Set("id", Html.IdForModel());
htmlAttributes.Set("class", "form-control");
//htmlAttributes.Set("ng-init", ngModel + " = ((" + ngModel + " == '0001-01-01T00:00:00' || " + ngModel +" == '1/01/0001 12:00:00 AM') ? '' : " + ngModel + ")"); // HACK: Make DateTime.MinValue display as empty

htmlAttributes.Set("date-time-picker", string.Empty);

const string DATE_FORMAT = "DD/MM/YYYY";
const string DATE_FORMAT_HINT = "dd/mm/yyyy";
const string TIME_FORMAT = "hh:mm a";
const string TIME_FORMAT_HINT = "h:mm am/pm";

string dateTimeFormatHint;
string dateTimeFormat;
if (datePicker == true && timePicker == false)
{
    //dateTimeFormat = "d/m/Y"; // xdan
    dateTimeFormat = DATE_FORMAT;
    dateTimeFormatHint = DATE_FORMAT_HINT;
    htmlAttributes.Set("default-time", "00:00:00"); // Set default time to start of the day
}
else if (datePicker == false && timePicker == true)
{
    //dateTimeFormat = "g:i a"; // xdan
    dateTimeFormat = TIME_FORMAT;
    dateTimeFormatHint = TIME_FORMAT_HINT;
}
else
{
    dateTimeFormat = "d/m/Y g:i a"; // xdan
   // dateTimeFormat = DATE_FORMAT + " " + TIME_FORMAT;
    dateTimeFormatHint = DATE_FORMAT_HINT + " " + TIME_FORMAT_HINT;
}
htmlAttributes.Set("format", dateTimeFormat);
//htmlAttributes.Set("placeholder", dateTimeFormatHint);


if (datePicker == true)
{
    htmlAttributes.Set("use-datepicker", "true", true);
}
if (timePicker == true)
{
    htmlAttributes.Set("use-timepicker", "true", true);
}
}
<div class="datepicker">
@Html.TextBoxFor(m => m, htmlAttributes)
</div>
@if (showFormat == true)
{ 
<div class="help-block small">eg: @dateTimeFormatHint</div>
}

I think the problem is with TIMEFORMAT but I don't know how to fix it. Because if I comment the following line out

htmlAttributes.Set("format", dateTimeFormat);

the date value appears both in the IE9 and IE 10 but it brings another problem as date gets displayed like :

2015-09-22T14:00:00+10:00

Fix

Setting the format in the editor template to DD/MM/YYYY h:mm a

Thank you all for your suggestions.

@pankaj yes I can see reference to http://xdsoft.net/jqplugins/datetimepicker/ plugin — snowflakes74, Oct 15 '15 at 05:06
Which version of angular js you have been using? because here is the link about compatibility https://docs.angularjs.org/guide/ie. Here is the another link about the issue you have been facing http://stackoverflow.com/questions/26567729/angular-js-not-working-with-ie9-but-works-with-other-browsers — Rocky, Oct 15 '15 at 05:24

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

Which version of angular js you have been using? because here is the link about compatibility https://docs.angularjs.org/guide/ie.

Here is the another link about the issue you have been facing Angular JS not working with IE9 but works with other browsers

edited May 23 '17 at 12:29

Community

1
1

answered Oct 15 '15 at 05:40

Rocky

309
1
3
12

thanks for your suggestions but in my app it is using AngularJS v1.4.2. – snowflakes74 Oct 15 '15 at 05:55

score 0 · Answer 2 · answered Oct 15 '15 at 06:23

0

I fixed it by setting the format in the editor template to DD/MM/YYYY h:mm a

Thank you all for your suggestions.

answered Oct 15 '15 at 06:23

snowflakes74

1,307
1
20
43

ASP MVC DateTime Validation Issue in IE9

2 Answers2