php - 如何使用jQuery DatePicker从开始日期设置结束日期加一

Question

我已经在我的网站上成功集成了jQuery DatePicker，并且想知道如何设置以下内容：

1. 不允许从当前日期加上 2 天选择开始日期。例如，如果今天的日期是 2012 年 7 月 20 日，那么访问者只能选择 2012 年 7 月 22 日开始的日期。
2. 结束日期必须从开始日期加一开始。如果开始日期是 2012 年 7 月 23 日，那么结束日期应该是 12 年 7 月 24 日。

顺便说一句，我正在制作酒店预订日历。

这是我基于示例的代码：

<script>
    $(function() {
        $( "#sd" ).datepicker();
    });

    $(function() {
        $( "#ed" ).datepicker();
    }); 
</script>

<tr>
  <td>Check In</td>
  <td>:</td>
  <td><input name="sd" type="text" id="sd" value="<?php echo $_SESSION['checkin'] ?>" size="10"" maxlength="8" /></td>
</tr>
<tr>
  <td>Check Out</td>
  <td>:</td>
  <td><input name="ed" type="text" id="ed" value="<?php echo $_SESSION['checkout'] ?>" size="10" maxlength="10" /></td>
</tr>

Answer 1

您可以在日期选择器事件中执行此操作。

$(function() {
    $( "#sd" ).datepicker({
        // before datepicker opens run this function
        beforeShow: function(){
            // this gets today's date       
            var theDate = new Date();
            // sets "theDate" 2 days ahead of today
            theDate.setDate(theDate.getDate() + 2);
            // set min date as 2 days from today
            $(this).datepicker('option','minDate',theDate);         
        },
        // When datepicker for start date closes run this function
        onClose: function(){
            // this gets the selected start date        
            var theDate = new Date($(this).datepicker('getDate'));
            // this sets "theDate" 1 day forward of start date
            theDate.setDate(theDate.getDate() + 1);
            // set min date for the end date as one day after start date
            $('#ed').datepicker('option','minDate',theDate);

        }
    });
    $( "#ed" ).datepicker();     
});

Answer 2

请检查Jquery: DatePicker: start/end date以获得答案。

长话短说 ：

  <script type="text/javascript">
$(document).ready(function () {

  $('#endDate').datepicker({ showOn: 'button',
      buttonImage: '../images/Calendar.png',
      buttonImageOnly: true, onSelect: function () { },
      onClose: function () { $(this).focus(); }
    });


  $('#startDate').datepicker({ showOn: 'button',
      buttonImage: '../images/Calendar.png',
      buttonImageOnly: true, onSelect:
        function (dateText, inst) {
          $('#endDate').datepicker("option", 'minDate', new Date(dateText));
        }
      ,
      onClose: function () { $(this).focus(); }
    });


});