Question

我正在使用http://www.daterangepicker.com/创建两个单独的日历。一个用于开始日期，一个用于结束日期。我想要发生的是当选择第一个日期时，第二个日期将自动提前7天。当页面加载时，它目前提前7天，但是当第一个日历更改时，我无法更改第二个日历。

更改时需要更新隐藏的html输入字段

以下代码：

<label for="datetimepickerin" class="date-input-holder__label"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></label>

<input type="text" class="form-control datetimepicker datetimepicker--checkin" name="datetimepickerin" id="datetimepickerin">

<label for="datetimepickerout" class="date-input-holder__label"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></label>

<input type="text" class="form-control datetimepicker datetimepicker--checkout" name="datetimepickerout" id="datetimepickerout">


<script>

    // Date picker scripts (daterangepicker.com)



    // Date from vars

    var todaysdate = moment().subtract(0, 'days');

    var daterangeparams = {
        singleDatePicker: true,
        "autoApply": true,
        minDate : todaysdate,
        "startDate" : todaysdate,
        linkedCalendars: true,
        locale: {
            "format": 'DD/MM/YYYY',
            "firstDay": 1
        }
    };



    // Date from calendar init      

    jQuery('.datetimepicker--checkin').daterangepicker(daterangeparams);

    jQuery('.datetimepicker--checkin').on('apply.daterangepicker', function(ev, picker) {

        var depdate = picker.startDate.format('DD/MM/YYYY');

        jQuery('[name="datetimepickerin"]').val(depdate);

        jQuery('[name="depdate-day"]').val(picker.startDate.date());
        jQuery('[name="depdate-month"]').val(picker.startDate.month() + 1);
        jQuery('[name="depdate-year"]').val(picker.startDate.year());

        jQuery('[name="datetimepicker"]').show();
    });



    // Date to vars

    var startout = moment().add(7, 'days');

    var daterangeparamsout = {
        singleDatePicker: true,
        "autoApply": true,
        minDate : todaysdate,
        "startDate" : startout,
        linkedCalendars: true,
        locale: {
            "format": 'DD/MM/YYYY',
            "firstDay": 1
        }
    };


    // Date to calendar init

    jQuery('.datetimepicker--checkout').daterangepicker(daterangeparamsout);

    jQuery('.datetimepicker--checkout').on('apply.daterangepicker', function(ev, picker) {

        var retdate = picker.startDate.format('DD/MM/YYYY');

        jQuery('[name="datetimepickerout"]').val(retdate);
        jQuery('[name="retdate-day"]').val(picker.startDate.date());
        jQuery('[name="retdate-month"]').val(picker.startDate.month() + 1);
        jQuery('[name="retdate-year"]').val(picker.startDate.year());

        jQuery('[name="datetimepicker"]').show();
    });


</script>

<input type="hidden" name="depdate-day" id="depdate-day" value="" />
<input type="hidden" name="depdate-month" id="depdate-month" value=""/>
<input type="hidden" name="depdate-year" id="depdate-year" value="" />

<input type="hidden" name="retdate-day" id="retdate-day" value="" />
<input type="hidden" name="retdate-month" id="retdate-month" value=""/>
<input type="hidden" name="retdate-year" id="retdate-year" value="" />

Answer 1

答案：在第一个选择器中选择日期后，使用新选项重新创建第二个选择器，包括比在另一个日历中选择的日期晚7天的选定日期。 / p>

小提琴：https://jsfiddle.net/t4tas2y5/4/

示例HTML ：

Start Date: <input type="text" id="start-date" value="" />

End Date: <input type="text" id="end-date" value="" />

示例JS ：

$('#start-date').daterangepicker({
  singleDatePicker: true,
  autoApply: true,
  minDate : moment(),
  startDate: moment(),
  locale: {
    format: 'DD/MM/YYYY',
    firstDay: 1
  }
});

$('#end-date').daterangepicker({
  singleDatePicker: true,
  autoApply: true,
  minDate: moment(),
  startDate: moment().add(7, 'days'),
  locale: {
    format: 'DD/MM/YYYY',
    firstDay: 1
  }
});

$('#start-date').on('apply.daterangepicker', function(ev, picker) {

    var new_start =  picker.startDate.clone().add(7, 'days');

    $('#end-date').daterangepicker({
      singleDatePicker: true,
      autoApply: true,
      minDate: moment(),
      startDate: new_start,
      locale: {
        format: 'DD/MM/YYYY',
        firstDay: 1
      }
    });

});

我没有提供更新隐藏输入的代码，因为您已经知道如何使用自己的代码执行此操作。

Answer 2

我用这行代码更新了你的小提琴

var new_minDate = picker.startDate.clone();

也可以使用这行代码

var new_start = picker.startDate.clone().add(7, 'days');

使用此var new_minDate = new_start;

Bootstrap的日期范围选择器，页面上的两个链接日历

2 个答案: