如何使用自定义格式的 jQuery UI DatePicker 和 MVC 4 (dd.MM.yyyy)

Question

假设您要使用具有自定义罗马尼亚语格式的日期选择器：dd.MM.yyyy

如何在不遇到 jquery 验证问题和回发后错误解释日期时间的情况下做到这一点？

Answer 1

首先在 jquery-ui.js 之后包含 datepicker-ro.js。

然后像这样在模型中设置格式：

public class ProductionCalculationReportModel
    {
        [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}", ApplyFormatInEditMode = true)]
        public DateTime? BeginDate { get; set; }

        [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}", ApplyFormatInEditMode = true)]
        public DateTime? EndDate { get; set; }        
    }

然后，您可以在 .cshtml 文件中放置文本框：

@Html.TextBoxFor(x => x.BeginDate, "{0:dd.MM.yyyy}", new { @class = "datefield" })
@Html.TextBoxFor(x => x.EndDate, "{0:dd.MM.yyyy}", new { @class = "datefield" })

然后，同样在 cshtml 文件中，我们来处理验证：

<script>
  $(function() {
      $("#BeginDate").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
          $("#EndDate").datepicker(
              {
                  minDate: selectedDate
                  , dateFormat: 'dd.mm.yy'
              }
              //"option", "minDate", selectedDate
              );
      }
    });
      $("#EndDate").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
          $("#BeginDate").datepicker(
              {
                  maxDate: selectedDate
                  , dateFormat: 'dd.mm.yy'
              }
              //"option", "maxDate", selectedDate
              );
      }
    });
  });

  $(function ()
  {
      $.validator.addMethod('date',
      function (value, element)
      {
          if (this.optional(element))
          {
              return true;
          }
          var ok = true;
          try
          {
              $.datepicker.parseDate('dd.mm.yy', value);
          }
          catch (err)
          {
              ok = false;
          }
          return ok;
      });          
  });

</script>

之后创建模型绑定器：

public class ProductionCalculationReportModelBinder : DefaultModelBinder
    {

        protected override object GetPropertyValue(ControllerContext controllerContext, ModelBindingContext bindingContext, System.ComponentModel.PropertyDescriptor propertyDescriptor, IModelBinder propertyBinder)
        {
            if (propertyDescriptor.ComponentType == typeof(PAS.Areas.Admin.Models.ProductionCalculationReportModel))
            {
                if (propertyDescriptor.Name == "BeginDate")
                {
                    var obj = bindingContext.ValueProvider.GetValue("BeginDate");
                    return DateTime.ParseExact(obj.AttemptedValue.ToString(), "dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture);
                }

                if (propertyDescriptor.Name == "EndDate")
                {
                    var obj = bindingContext.ValueProvider.GetValue("EndDate");
                    return DateTime.ParseExact(obj.AttemptedValue.ToString(), "dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture);
                }
            }
            return base.GetPropertyValue(controllerContext, bindingContext, propertyDescriptor, propertyBinder);
        }
    }

像这样在 Global.asax 中添加它：

ModelBinders.Binders.Add(typeof(ProductionCalculationReportModel), new ProductionCalculationReportModelBinder()); 

然后像这样使用它：

[HttpPost]
        public ActionResult Index([ModelBinder(typeof(ProductionCalculationReportModelBinder))]ProductionCalculationReportModel model) {}