使用JQuery UI的日期範圍的MVC編輯器模板DatePicker

Question

我需要在大多數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; } 
} 

和編輯tamplate它：

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

*未經測試的代碼

希望它能幫助！