使用JQuery UI DatePicker的日期范围的MVC编辑器模板

Question

我需要在大多数MVC视图上显示JQuery UI Datepicker.所以我为Date Range创建了一个Model类:

public class DateRange
{
    [DisplayName("From")]
    [DataType(DataType.Date)]
    public DateTime? FromDate { get; set; }

    [DisplayName("To")]
    [DataType(DataType.Date)]
    public DateTime? ToDate { get; set; }
}

和编辑为它填写:

@model DateRange
@Html.LabelFor(model => model.FromDate)
@Html.TextBoxFor(model => model.FromDate, "{0:dd/MM/yyyy}", new { @class = "dateRangeFrom"})
@Html.LabelFor(model => model.ToDate)
@Html.TextBoxFor(model => model.ToDate, "{0:dd/MM/yyyy}", new { @class = "dateRangeTo"})

并在我的EditorHookup.js文件中:

$(function ()
{
    $('.dateRangeFrom').datepicker({
        dateFormat: "dd/mm/yy",
        onClose: function (selectedDate) {
            $(".dateRangeTo").datepicker("option", "minDate", selectedDate);
        }
    });
    $('.dateRangeTo').datepicker({
        dateFormat: "dd/mm/yy",
        onClose: function (selectedDate) {
            $(".dateRangeFrom").datepicker("option", "maxDate", selectedDate);
        }
    });
})

这一切都完美无缺,除非我在视图中需要两个这样的日期范围模型.正如您所预测的,这不适用于多个日期范围.

编辑:例如,问题是当我在第一个日期范围关闭"发件人"选择器时,它会在两个日期范围内设置"收件人"的初始日期.

有什么帮助吗？

Answer 1

一种方法是将两个文本框放在一个<div>.所以你的新编辑器模板:

@model DateRange
<div>
@Html.LabelFor(model => model.FromDate)
@Html.TextBoxFor(model => model.FromDate, "{0:dd/MM/yyyy}", new { @class = "dateRangeFrom"})
@Html.LabelFor(model => model.ToDate)
@Html.TextBoxFor(model => model.ToDate, "{0:dd/MM/yyyy}", new { @class = "dateRangeTo"})
</div>

并且js应该如下所示:

$(function ()
{
    $('.dateRangeFrom').datepicker({
        dateFormat: "dd/mm/yy",
        onClose: function (selectedDate) {
            $(this).closest("div").find(".dateRangeTo").datepicker("option", "minDate", selectedDate);
        }
    });
    $('.dateRangeTo').datepicker({
        dateFormat: "dd/mm/yy",
        onClose: function (selectedDate) {
            $(this).closest("div").find(".dateRangeFrom").datepicker("option", "maxDate", selectedDate);
        }
    });
})

*未经测试的代码

希望能帮助到你!