物化日期选择器 - 单击图标时渲染答案

【问题标题】：Materialize datepicker - Rendering when an icon is clicked物化日期选择器 - 单击图标时渲染
【发布时间】：2015-07-02 01:08:15
【问题描述】：

我正在尝试使用 google 的物化日期选择器 (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
});

但我想使用 in this jsfiddle 等无法正常工作的 <i> 元素来实现。问题是我必须单击并按住鼠标才能在此处查看日期选择器..！

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
});

任何人都知道一种解决方案，可以在我单击时使其正常工作（释放鼠标后不会消失）？

【问题讨论】：

为什么要使用<i>标签？
创建一个图标 (materializecss.com/icons.html)。我只想在用户单击图标时弹出日期选择器。 @brso05
尝试隐藏输入元素，点击图标时触发输入的click事件...
@brso05 谢谢。我尝试过这个。但它不起作用并提出了另一个问题 - stackoverflow.com/questions/29832007/…

标签： javascript jquery datepicker material-design

【解决方案1】：

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

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

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

【讨论】：