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'
        }
    });       
});

解决方案

基于Amiracle的建议，这是我最终的工作解决方案。我为daterangepicker指定了新日期。

    $('.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').data('daterangepicker').setStartDate(new Date);
        $('.tqm-events-filter__button--date').data('daterangepicker').setEndDate(new Date);
    });

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('');
  });

Answer 2

根据 Amiracle 的建议，这是我的最终工作解决方案。我为 daterangepicker 分配了新日期。

    $('.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').data('daterangepicker').setStartDate(new Date);
        $('.tqm-events-filter__button--date').data('daterangepicker').setEndDate(new Date);
    });

Answer 3

$('.tqm-events-filter__button--date').on('cancel.daterangepicker', function (ev, picker)
{
    $(this).data('daterangepicker').setStartDate(moment().format("MM-DD-YYYY")); //date now
    $(this).data('daterangepicker').setEndDate(moment().format("MM-DD-YYYY"));//date now
});

取消时重置daterangepicker.js日期值

3 个答案: