javascript - Materialise datepicker - 单击图标时呈现

Question

我正在尝试使用谷歌的具体化日期选择器( http://materializecss.com/forms.html )。在他们的示例中，他们将其与 <input> 一起使用。类似 in this jsfiddle 的元素.

HTML:<input class="datepicker" value="click"></input>

JQuery:

$('.datepicker').pickadate({
  selectMonths: true, // Creates a dropdown to control month
  selectYears: 15 // Creates a dropdown of 15 years to control year
});

<小时/>

但我想用 <i> 来做到这一点类似 in this jsfiddle 的元素这是无法正常工作的。问题是我必须单击并按住鼠标才能看到此处的日期选择器..!

HTML:<i class="datepicker">click</i>

JQuery:

$('.datepicker').pickadate({
  selectMonths: true, // Creates a dropdown to control month
  selectYears: 15 // Creates a dropdown of 15 years to control year
});

有人知道一个解决方案，可以使其在我单击时正常工作(释放鼠标后不会消失)？

Answer 1

尝试向您的图标添加事件监听器，然后使用方法 .open()。

  var element = document.querySelector('.datepicker');  
  $('.datepicker-icon').on('click', function(event) {
          event.stopPropagation();
          M.Datepicker.getInstance(element).open();
      });

停止传播不是我的主意，我读过它 here