Шаблоны редактора MVC для диапазонов дат с использованием JQuery UI DatePicker

Мне нужно отображать JQuery UI Datepicker в большинстве моих представлений MVC. Поэтому я создал класс модели для диапазона дат:

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

Все это работает отлично, если мне не нужны две из этих моделей диапазона дат, на мой взгляд. Как вы можете догадаться, это не работает для нескольких диапазонов дат.

Изменить: проблема, например, заключается в том, что когда я закрываю средство выбора «От» в первом диапазоне дат, оно устанавливает начальную дату средства выбора «Кому» в ОБОИХ диапазонах дат.

Любая помощь, пожалуйста?


jquery asp.net-mvc jquery-ui mvc-editor-templates
person shadi    schedule 08.10.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Один из способов сделать это — поместить оба текстовых поля в файл <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);
        }
    });
})

*Непроверенный код

Надеюсь, поможет!

person VinnyG    schedule 09.10.2013
comment
Я знаю, что не должен добавлять комментарий, чтобы сказать спасибо, но я не могу! Спасибо за Ваш ответ. Это сработало отлично. - person shadi; 09.10.2013