MaterializeCss 使用 dblclick 事件打开 datepicker modal

Question

我正在使用 materializecss，我的老板让我将日期选择器模式上的触发器从经典的“单击”更改为双击。

问题是，没有关于此的文档，并且可能在对象中进行了硬编码。

有没有办法改变这种行为？

Answer 1

您可以创建两个输入元素并隐藏其中一个。下面我创建了 input1 作为日期选择器和 input2 作为标准文本输入。然后我隐藏了第一个并为第二个分配了一个事件监听器（ondblclick）。

这可能不是最好的解决方案，但确实有效。

var datepicker = document.querySelector('#input1')
var input2 = document.querySelector('#input2')

var options = {
  autoClose : true,
  container : document.body,
  onSelect : function (day) {
    input2.value = day.toDateString(), 
    M.updateTextFields()
  }
}
var instance = M.Datepicker.init(datepicker, options)

input2.ondblclick = function () {
  instance.open()
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div class="input-field col s5 hide">
    <input type="text" class="datepicker" id="input1">
  </div>
  <div id="div2" class="input-field col s5">
    <input type="text" id="input2">
    <label for="input2">Pick a date</label>
  </div> 
</div>