日期範圍的特殊日期選擇器

我迫切需要爲兩個日期生成範圍日期選擇器：開始日期和結束日期。現在開始日期不能在日期時間之前，並且結束日期不能在選定的開始日期之前。這裏是我想要的一個例子。可以有人告訴我用什麼來做到這一點？日期範圍的特殊日期選擇器

http://rezervari.hotelalpin.ro/

這是我試過，但沒有工作：

  </head> 
     @using (Html.BeginForm("SearchFree", "Reservation", FormMethod.Get,new {id = "form" })) 
    {      

     <h7>Introduceti perioada Rezervarii</h7> 
     <div class="editor-label"> 
     <label id="cautare" for="StartDate">Data Intrare:  </label>@(Html.JQueryUI().Datepicker("StartDate").DateFormat("mm-dd-yy").MinDate(DateTime.Today).ShowButtonPanel(true).ChangeYear(true).ChangeMonth(true).NumberOfMonths(2)) 
     </div> 
      <div class="editor-label"> 
     <label id="cautare" for="EndDate">Data Iesire:  </label>@(Html.JQueryUI().Datepicker("EndDate").DateFormat("mm-dd-yy").MinDate(DateTime.Today).ShowButtonPanel(true).ChangeYear(true).ChangeMonth(true).NumberOfMonths(2)) 

     </div> 

     <p> 
     <input id="buton1" type="submit" value="Cauta camere libere" /> 
      </p> 

    } 
     <script type="text/javascript"> 
     $(document).ready(function() { 
    $.validator.addMethod("EndDate", function (value, element) { 
    var startDate = $('.StartDate').val(); 
    return Date.parse(startDate) <= Date.parse(value); 
    } 
    , "* End date must be after start date"); 
$('.form').validate(); 
}); 
    </script>

來源

2012-06-25 jonny

你甚至試圖找到一個？ –

請參閱[此問題]（http://stackoverflow.com/questions/3761185/jquery-validate-date-range）瞭解如何使用jQuery驗證的提示。 – Blazemonger

@Blazemonger你鏈接到的問題與此不同，因爲這個問題涉及2個輸入的開始和結束日期，但鏈接的問題涉及具有任意日期範圍約束的單個輸入。 – xiankai

的jquery UI datepicker有可以使用的日期範圍選項。你可以將它設置這樣的：

HTML：

<label for="from">From</label> 
<input type="text" id="from" name="from"/> 
<label for="to">to</label> 
<input type="text" id="to" name="to"/>

的Javascript：

$(function() { 
    $("#from").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 3, 
     onSelect: function(selectedDate) { 
      $("#to").datepicker("option", "minDate", selectedDate); 
     } 
    }); 

    $("#to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 3, 
     onSelect: function(selectedDate) { 
      $("#from").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
});

來源

2012-06-25 14:28:54

謝謝你，這是我正在尋找。是否有任何postion使它只讀，以便我不能引入數據manualy（只有通過選擇日期選擇器。並且任何可能性以允許日期改變後，我改變「從」日期，因爲它的工作在開始，但在我之後再次選擇日期並返回選擇日期我不能這樣做 – jonny

您可以只將文本框設置爲只讀文本框的onchange，您可以清除該文本框或將該文本框設置爲開始日期的一天。 –

應該是能夠做到這一點與JQuery date picker！

然後，您可以使用一些Javascript/JQuery驗證來提醒用戶輸入的日期超出了您指定的範圍。

來源

2012-06-25 14:21:30 Danny

jQuery datepicker的設置允許您爲用戶設置特定的範圍以供選擇。 –

的確是Josh Mein！在我給出的鏈接的右側有一個選項卡，用於查看限制日期的示例 - >'限制日期範圍'。 – Danny

請參閱http://jqueryui.com/demos/datepicker/#min-max - 但是，這僅適用於日期選擇器日曆，並且不會阻止用戶輸入超出日期的日期。請參閱[這個問題]（http://stackoverflow.com/questions/3761185/jquery-validate-date-range）的建議使用jQuery驗證要求日期在一個給定的範圍內。 – Blazemonger

您可以使用jQuery datepicker的minDate和maxDate選項來限制可選日期的範圍。這裏看一個例子：

http://jqueryui.com/demos/datepicker/#min-max

來源

2012-06-25 14:28:14

<input type="text" id="tbStartDate" value="" disabled="disabled" /> 
<input type="text" id="tbEndDate" value="" disabled="disabled" /> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#tbStartDate").datepicker({ 
      //minDate: new Date(2007, 1 - 1, 1), //use for Date time now 
      dateFormat: 'dd-mm-yy', 
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onSelect: function (dateText, inst) { 
       var $endDate = $('#tbStartDate').datepicker('getDate'); 
       $endDate.setDate($endDate.getDate() + 1); 
       $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); 
      }, 
      onClose: function (dateText, inst) { 
       //$("#StartDate").val($("#tbStartDate").val()); 
      } 
     }); 

     $("#tbEndDate").datepicker({ 
      //minDate: new Date($("#tbStartDate").datepicker('getDate')), 
      dateFormat: 'dd-mm-yy', 
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onSelect: function (dateText, inst) { 
       $('#tbStartDate').datepicker("option", 'minDate', new Date($("#tbEndDate").datepicker('getDate'))); 
      }, 
      onClose: function (dateText, inst) { 
       //$("#EndDate").val($("#tbEndDate").val()); 
      } 
     }); 

      var $endDate = $('#tbStartDate').datepicker('getDate'); 
      $endDate.setDate($endDate.getDate() + 1); 
      $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);    }); 
</script>

來源

2012-07-26 10:43:10 Thulasiram

日期範圍的特殊日期選擇器

回答

相關問題