Question

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

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>

Answer 1

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

Answer 2

应该可以使用JQuery date picker！

执行此操作

然后，您可以使用某些Javascript / JQuery验证来提醒用户他们是否输入了您指定范围之外的日期。

Answer 3

您可以使用jQuery datepicker的minDate和maxDate选项限制可选日期的范围。请看这里的例子：

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

Answer 4

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

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

4 个答案: