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

Question

我需要在大多数 MVC View 上显示 JQuery UI Datepicker。所以我为日期范围创建了一个模型类:

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);
        }
    });
})

*未经测试的代码

希望对你有帮助!