如何每天禁用“日期范圍選擇器”中的“點擊”事件？

Question

我試圖防止DateRangePicker的每一天發生“點擊”事件，我只是試圖阻止用戶更改日期范圍。

我在Codepen上創建了一個“筆”，這是鏈接： https ://codepen.io/jnts/pen/yQPwmB

的HTML

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

Java腳本

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 ，但這只是防止對的“click”事件input ，所以DateRangePicker不會出現。

我只是想以“只讀”方式顯示日期范圍。

Answer 1

添加pointer-events: none使用CSS在元素上添加任何pointer-events: none不會阻止任何點擊事件從該元素觸發。 要在打開的日歷上禁用單擊事件，請在樣式表中添加以下內容：

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

在此處查看分叉的代碼： https ： //codepen.io/sungaila/pen/rQJOMQ