1

我正在使用http://www.daterangepicker.com/创建两个单独的日历。一个用于开始日期，一个用于结束日期。What I want to happen is when the first date is chosen the second one will automatically have the value 7 days ahead. 当前页面加载提前 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="" />
4

2 回答 2

1

答：当在第一个选择器中选择了日期时，使用新选项重新创建第二个选择器，包括选择的日期比刚刚在另一个日历中选择的日期晚 7 天。

小提琴：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
      }
    });

});

我没有包含用于更新隐藏输入的代码，因为您已经知道如何从自己的代码中执行此操作。

于 2017-07-19T21:24:12.367 回答
1

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

var new_minDate = picker.startDate.clone();

这行代码也可以使用

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

有了这个var new_minDate = new_start;

于 2017-07-19T23:32:56.117 回答