日期范围的特殊日期选择器

我迫切需要为两个日期生成范围日期选择器：开始日期和结束日期。现在开始日期不能在日期时间之前，并且结束日期不能在选定的开始日期之前。这里是我想要的一个例子。可以有人告诉我用什么来做到这一点？日期范围的特殊日期选择器

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

日期范围的特殊日期选择器

回答

相关问题