MaterializeCss Use dblclick event to open datepicker modal

Question

I'm working with materializecss and my boss asked me to change the trigger on the datepicker modal from the classic 'click' to a double click.

Problem is, there's no documentation about that, and maybe is hard-coded in the object.

Is there a way to change this behavior?

Answer 1

You can create two input elements and hide either of them. Below I've created input1 as a datepicker and input2 as a standard text input. Then I've hidden the first one and assigned an event listener (ondblclick) for the second one.

It may not be the best solution but works.

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>