Я работаю над исправлением ошибки в приложении, разработанном с помощью ASP.NET MVC Razor и Angular.
Проблема в том, что в IE9 значение datetime не отображается вообще в поле ввода.
Я отследил его до "требуемого", что он продолжает добавлять обязательный = "требуется".
Свойство IncidentDate в модели равно NULL.
public System.DateTime ? IncidentDate { get; set; }
Он отлично работает в IE10+, FF и Chrome, но в IE 9 DateTime не отображается вообще.
Если я отредактирую html разметки и удаляю требуемый тег, чем значение DateTime, появится в поле ввода.
Я попытался добавить следующую строку в application_start еще одну проблему:
ModelValidatorProviders.Providers.Clear();
ModelValidatorProviders.Providers.Add(new DataAnnotationsModelValidatorProvider());
Вот разметка, которая генерируется в 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.">
Если у кого-то есть решение, пожалуйста, дайте мне знать. Спасибо.
Копая бит глубже, я обнаружил, что существует специальный шаблон редактора даты и времени. Я начал отлаживать его и, кажется, когда я не добавляю атрибуты, он отлично работает в 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>
}
Я думаю, проблема связана с TIMEFORMAT, но я не знаю, как это исправить. Потому что, если я прокомментирую следующую строку
htmlAttributes.Set("format", dateTimeFormat);
значение даты появляется как в IE9, так и в IE 10, но при этом возникает другая проблема, поскольку дата отображается как:
2015-09-22T14: 00: 00 + 10: 00
исправлять
Установка формата в шаблоне редактора в формате DD/MM/YYYY h: mm a
Спасибо всем за ваши предложения.
Я исправил его, установив формат в шаблоне редактора на DD/MM/YYYY h: mm a
Спасибо всем за ваши предложения.
Какую версию угловых js вы используете? потому что вот ссылка о совместимости https://docs.angularjs.org/guide/ie.
Вот еще одна ссылка о проблеме, с которой вы столкнулись. Angular JS не работает с IE9, но работает с другими браузерами