daterangepicker 两个不同的输入

Question

我有两个相同形式的不同 daterangepicker，因为我需要在两个输入中使用它，而不是只在一个输入中使用它。所以我用 class select 或初始化它： $('.daterange').daterangepicker({});

一切都很完美，但我想同时更改两个。如果我在第一个中 select 一个范围，当我打开第二个时，我希望在日历中具有相同的范围 selected。所以我想在 ON SHOW 活动中做到这一点

$('.daterange').daterangepicker()
.on('apply.daterangepicker' ,function(ev, picker) {
$('.scheduledStartGmt').val(picker.startDate.format(picker.format)).change();
$('.scheduledEndGmt').val(picker.endDate.format(picker.format)).change();
})
.on('show.daterangepicker' ,function(ev, picker){

$('.daterange').data('daterangepicker').setStartDate($('.scheduledStartGmt').val()); 
$('.daterange').data('daterangepicker').setEndDate($('.scheduledEndGmt').val());

});

只修改第一个。我该怎么做？

Answer 1

我遇到了同样的问题，但找到了解决方案，这可能对您有所帮助：

看看我的代码：

    if($('#search_checkin, #search_checkout').length){
    // check if element is available to bind ITS ONLY ON HOMEPAGE
    var currentDate = moment().format("DD-MM-YYYY");

    $('#search_checkin, #search_checkout').daterangepicker({
        locale: {
              format: 'DD-MM-YYYY'
        },
        "alwaysShowCalendars": true,
        "minDate": currentDate,
        "maxDate": moment().add('months', 1),
        autoApply: true,
        autoUpdateInput: false
    }, function(start, end, label) {
      // console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
      // Lets update the fields manually this event fires on selection of range
      var selectedStartDate = start.format('DD-MM-YYYY'); // selected start
      var selectedEndDate = end.format('DD-MM-YYYY'); // selected end

      $checkinInput = $('#search_checkin');
      $checkoutInput = $('#search_checkout');

      // Updating Fields with selected dates
      $checkinInput.val(selectedStartDate);
      $checkoutInput.val(selectedEndDate);

      // Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
      var checkOutPicker = $checkoutInput.data('daterangepicker');
      checkOutPicker.setStartDate(selectedStartDate);
      checkOutPicker.setEndDate(selectedEndDate);

      // Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
      var checkInPicker = $checkinInput.data('daterangepicker');
      checkInPicker.setStartDate(selectedStartDate);
      checkInPicker.setEndDate(selectedEndDate);

    });

} // End Daterange Picker

如果你想让我解释，请告诉我。

daterangepicker 两个不同的输入

daterangepicker two different inputs

jquery

daterangepicker