0

我迫切需要为两个日期制作一个范围日期选择器：开始日期和结束日期。开始日期不能早于现在的日期时间，结束日期不能早于所选的开始日期。这是我想要的一个例子。有人能告诉我用什么来做这个吗？

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>
4

4 回答 4

3

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-25T14:28:54.263 回答
2

应该能够使用JQuery 日期选择器来做到这一点！

然后，如果用户输入的日期超出您指定的范围，您可以使用一些 Javascript/JQuery 验证来提醒他们。

于 2012-06-25T14:21:30.137 回答
0

您可以使用jQuery datepicker的minDate和选项来限制可选日期的范围。maxDate在此处查看示例：

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

于 2012-06-25T14:28:14.480 回答
0 
<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-26T10:43:10.497 回答