jquery - 取消时重置 daterangepicker.js 日期值

Question

我正在使用Date Range Picker by Dangrossman我本质上需要做的是在单击取消按钮时清除日期。

根据我所读到的内容，脚本中无法调用此操作，但我读到我基本上可以销毁并重新创建日期范围选择器，但是我很难实现代码。

这是我到目前为止所拥有的。任何帮助将不胜感激。

$(function() {      
    $('.tqm-events-filter__button--date').daterangepicker({
        alwaysToggle: true,
        parentEl: "#tqm-date-range-picker__container",
        locale: { 
            cancelLabel: 'Clear filters',
            applyLabel: 'Apply filters'
        }
    });

    $('.tqm-events-filter__button--date').click(function() {
        $('.tqm-events-filter__button--checklist-item').each(function() {
            $(this).next().hide();
        });
        $('#tqm-date-range-picker__container').show();
    });
});

$('.tqm-events-filter__button--date').on('cancel.daterangepicker', function() {
    $('.tqm-events-filter__button--date').removeClass('tqm-apply-event-filter-button');
    $('#tqm-date-range-picker__container').hide();
    $('.tqm-events-filter__button--date').daterangepicker('destroy');
    $('.tqm-events-filter__button--date').daterangepicker({
        alwaysToggle: true,
        parentEl: "#tqm-date-range-picker__container",
        locale: { 
            cancelLabel: 'Clear filters',
            applyLabel: 'Apply filters'
        }
    });       
});

Answer 1

您可以使用jQuery's .val()方法设置输入值。

因此，在您的情况下，当触发取消函数时，您可以使用 jQuery 的 .val() 方法将目标输入的值设置为空字符串。

这可以在Date range picker website上的行动中进一步看到。 (第 17 行)

$('.tqm-events-filter__button--date').on('cancel.daterangepicker', function(ev, picker) {
      $(.targeted-input).val('');
  });