Question

我试图防止在DateRangePicker的每一天都发生'click'事件，我只是试图阻止用户更改日期范围。

我在Codepen上创建了一个“笔”，这是链接：https://codepen.io/jnts/pen/yQPwmB

HTML

<input data-start="16/11/2018" data-end="16/12/2018" type="text" name="dates">

JavaScript

const self = $('input[name="dates"]')

self.daterangepicker({
    applyButtonClasses: 'd-none',
    showDropdowns: false,
    opens: "center",
    drops: "down",
    autoApply: false,
    startDate: self.data('start'),
    endDate: self.data('end'),
    minDate: self.data('start'),
    maxDate: self.data('end'),
    locale: {
      format: "DD/MM/YYYY",
      separator: " - ",
      firstDay: 1
    }
});

我已经尝试在input上添加“ disabled”属性，但这只会阻止input上的“ click”事件，因此DateRangePicker不会出现。

我只是想以一种“只读”方式显示日期范围。

Answer 1

使用CSS将pointer-events: none添加到元素中将防止该元素触发任何点击事件。要在打开的日历上禁用点击事件，请将以下内容添加到样式表中：

.drp-calendar {
 pointer-events: none;
}

在此处查看分叉的代码：https://codepen.io/sungaila/pen/rQJOMQ

如何每天禁用“日期范围选择器”中的“点击”事件？

1 个答案: