预输入的jqueryui datepicker“MM yy”格式化日期无法在ASP.Net服务器端验证失败时呈现

Question

我使用的是jqueryui datepicker日期（非标准格式：“MM yy”datepicker /“MMMM yyyy”C＃）。当表单未通过服务器端验证时，预先输入的日期在返回到表单时无法重新呈现（即输入为空）。注意，当使用标准（即未指定/默认）日期格式时，datepicker似乎在这方面工作正常。另请注意，验证客户端验证失败时，验证行为正常。

我认为这是由于验证返回时datepicker无法识别非标准日期格式，因为如果我选择日期，请在浏览器中关闭javascript（或者注释掉$("#internGradDate").datepicker...语句（如下））然后提交服务器端验证失败的表单，日期将正常显示。

以下是我尝试在视图中设置日期格式的一些有前途的方法，但没有效果：

Date only from TextBoxFor()

@Html.TextBoxFor(m => m.internGradDate, "{0:MMMM yyyy}")

---

Returned DatePicker Value in Wrong Format

@Html.TextBoxFor(model => model.internGradDate,
    new { Value = Model.internGradDate.HasValue ?
          Model.internGradDate.Value.ToString("MMMM yyyy") : string.Empty })

---

最后，如果我在Chrome开发工具“Elements”中查看datepicker输入元素，则“value”属性显示正常（例如value =“2019年4月”），尽管输入本身为空白。

使用Javascript

$("#internGradDate")
    .datepicker({ dateFormat: "MM yy", changeYear: true, yearRange: '1988:2028' })
    .attr('readonly', 'true')
    .datepicker("option", "changeMonth", true)
    .datepicker("option", "showButtonPanel", true)
    .datepicker("option", "onClose", function (e) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker("setDate", new Date(year, month, 1))
    })
    .keypress(function (event) {
        if (event.keyCode == 8) {
            event.preventDefault();
        }
    });

数据传输对象（DTO）

[Display(Name = "Graduation ")]
[DisplayFormat(DataFormatString = "{0:MMMM yyyy}", ApplyFormatInEditMode = true)]
public DateTime? internGradDate { get; set; }

剃刀代码

<div class="row form-group form-group-override">
  <div class="col-sm-6">
    @Html.LabelFor(model => model.internGradDate, htmlAttributes: new { @class = "control-label request-label" })
  </div>
  <div class="col-sm-6">
    @Html.TextBoxFor(model => model.internGradDate, "{0:MMMM yyyy}")
    @Html.ValidationMessageFor(model => model.internGradDate, "", new { @class = "text-danger" })
  </div>
</div>

控制器动作

[HttpPost]
[ValidateAntiForgeryToken]
[ValidateInput(false)]
    public ActionResult Add(Intern_DTO it, HttpPostedFileBase file1)
    {
        var Ntid = Session["username"].ToString();

        string fileExt = "";

        //Limit upload file size to 4 MB
        if (file1 != null)
        {
            if (file1.ContentLength > 4194304)
            {
                ModelState.AddModelError("file1", "Please do not exceed 4 MB image size");
            }
            else
            {
                fileExt = Path.GetExtension(file1.FileName).ToLower();
                if (fileExt != ".doc" && fileExt != ".docx" && fileExt != ".pdf")
                    ModelState.AddModelError("file1", "Resume filetypes must be docx, doc, or pdf");
            }
        } 

        if (!ModelState.IsValid)
        {
            string message = "We encountered an issue while create the Admin record. Please review the records below.";
            TempData.Remove("message");
            TempData.Add("message", message);
            return View(it);
        }
        else
        {
            ...
        }
    }

---

因此，总而言之，我不清楚为什么datepicker输入在服务器端验证失败返回到表单时为空，尽管其value属性显示预期内容（例如“2019年4月”，与预表单提交相同）。

如果有任何问题，请告诉我，并感谢任何见解。

Answer 1

似乎是由于datepicker指令的顺序 - 我在完成实例化之前最初“readonly”将它打破一个预先存在的值？

感谢所有看过的人！

$("#internGradDate")
  .datepicker({
      dateFormat: "MM yy",
      changeYear: true,
      changeMonth: true,
      yearRange: '1988:2028',
      showButtonPanel: true,
      onClose: function (e) {
          var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
          var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
          $(this).datepicker("setDate", new Date(year, month, 1))
      }
  }).keypress(function (event) {
      if (event.keyCode == 8) {
          event.preventDefault();
      }
  }).attr('readonly', 'true');