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' の両方で 'current date' より後の日付を無効にする必要があります
3. 'To' の日付は 'From' の日付よりも小さい必要があります
4 . . 「開始日」が選択されていて、それが > の場合は「終了日」です。次に、'To' 日付を 'From' == 'To' に更新する必要があります
。 5. 'From' 日付が選択されています。「終了日」が選択されている場合、「開始日」より前の「終了日」カレンダー内の日付は無効にする必要があります。
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. [開始日] を選択してから [終了日] を選択すると、カレンダーに [現在の日付] のみが表示される

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 に答える