1

使用：

<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./bootstrap/css/datepicker.css" rel="stylesheet" media="screen">
<link href="./css/customize.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./bootstrap/js/bootstrap-datepicker.js"></script>

要求：
1. 具有“From”和“To”日历
2.“From”和“To”都应禁用大于“当前日期”的日期
3.“To”中的日期应 <=“From”中的日期
4 . 如果选择了“从”日期并且它是 >，那么“到”日期。然后'To' 日期应该更新为'From' == 'To'
5. 'From' 日期被选中。When 'To' date is being selected then dates inside the 'To' calendar that are < 'From' date should be disabled.
6.从'From'到'To'的自动前进

我已经做到了这一点：

    $(function(){
    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);


    var from = $('#fromDate').datepicker({
      onRender: function(date) {
        return date.valueOf() > now.valueOf() ? 'disabled' : '';
      }
    }).on('changeDate', function(ev) {
      if (ev.date.valueOf() > to.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        to.setValue(newDate);
      }
      from.hide();
      $('#toDate')[0].focus();
    }).data('datepicker');
    var to = $('#toDate').datepicker({
      onRender: function(date) {
        return ((date.valueOf() <= from.date.valueOf()) || (date.valueOf() > now.valueOf()) ? 'disabled' : '');
      }
    }).on('changeDate', function(ev) {
      to.hide();
    }).data('datepicker');
    });

问题：
1. 当我第一次从“到”日期日历中选择时，我只有“当前日期”可用。
2.没有自动前进。
3. When selected 'From' date and then 'To' date calendar shows only 'current date'

4

1 回答 1

3

希望这可以帮助：

使用https://github.com/eternicode/bootstrap-datepicker/blob/master/js/bootstrap-datepicker.js

$(function(){

    var dateStart = $('#date-start')
    .datepicker({
        startDate: new Date()
    })
    .on('changeDate', function(ev){
        dateEnd.datepicker('setStartDate', ev.date);
        dateStart.datepicker('hide');
        dateEnd.focus();
    });

    var dateEnd = $('#date-end')
    .datepicker()
    .on('changeDate', function(ev){
        dateStart.datepicker('setEndDate', ev.date);
        dateEnd.datepicker('hide');
    });
});
于 2013-06-29T00:51:20.693 回答