Question

我正在修复使用ASP.NET MVC Razor和Angular开发的应用程序的错误。

问题是在IE9中，日期时间值根本没有显示在输入框中。

我已将其追踪到“必需”，它不断添加 required =“required”。

模型中的IncidentDate属性是可为空的datetime。

 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

谢谢大家的建议。

Answer 1

您使用的是哪种角度的js？因为这里是关于兼容性https://docs.angularjs.org/guide/ie的链接。

以下是您遇到的问题的另一个链接Angular JS not working with IE9 but works with other browsers

Answer 2

我通过将编辑器模板中的格式设置为DD / MM / YYYY h：mm a来修复它

谢谢大家的建议。

IE9中的ASP MVC日期时间验证问题

2 个答案: