jquery - 限制 MVC3 Razor 中 jQuery DatePicker 中的日期范围

Question

我目前正在开发 jQuery 日期选择器，我想限制用户选择从每月 1 号到每月 28 号的日期。

28号之后的剩余日期将无法选择，我想实现这一点。有什么办法可以做到这一点吗？

就像一个想法，我试图将数据注释放在模型类的日期变量上，但后来不知道该怎么做。我认为看起来更复杂的其他选项是在日期选择器出现时使不需要的日期不可选择。

Answer 1

让我们首先看一下 html/js 是什么样子的。因此，使用日期选择器的 beforeShowDay 属性来限制可以显示的天数

JavaScript

$('#date').datepicker({
   beforeShowDay: function(date){ return [date.getDate() <= 28,""];}
})

html

<input id="date" type="text" value="">

这是一个js fiddle http://jsfiddle.net/dWaLq/这证明了这一点。这是相关的 jquery ui 文档:http://api.jqueryui.com/datepicker/#option-beforeShowDay

有几种方法可以将 javascript/html 连接到您的 View 。

一种选择是使用 UIHintAttribute 来指定与日期属性一起使用的 View 模型

在你的 View 模型中

 [UIHint("LimitedDate")]
 public DateTime date {get;set;}

在你看来

 @Html.EditorFor(m => m.date)

并且您将在“ View ”>“共享”>“编辑器”文件夹中拥有一个自定义 View LimitedDate.cshtml

@model DateTime

@{var fieldName = ViewData.TemplateInfo.HtmlFieldPrefix;}
<input id="@fieldName" name="@fieldName" type="text" value="@Model.ToString('d')">

<script>
  $('#' + '@fieldname').datepicker({
     beforeShowDay: function(date){ return [date.getDate() <= 28,""];}
  })
</script> 

你可以看看How can I get the property name in my MVC3 custom Editor Template有关将属性名称输入编辑器的更多支持。