3

我需要在我的大多数 MVC 视图上显示 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);
        }
    });
})

这一切都很完美，除非我认为我需要其中两个日期范围模型。正如您可以预测的那样，这不适用于多个日期范围。

编辑：例如，问题是当我在第一个日期范围内关闭“从”选择器时，它将在两个日期范围内设置“至”选择器的初始日期。

请问有什么帮助吗？

4

1 回答 1

5

一种方法是将两个文本框放在一个<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);
        }
    });
})

*未经测试的代码

希望能帮助到你！

于 2013-10-09T01:04:46.783 回答