Javascript 如何使物化日期选择器（实际上是pickadate）可编辑？

我正在尝试使materialize日期选择器可编辑。目标是，用户可以直接在输入字段中写入日期，或者使用小部件选择日期

我做了一些即将奏效的事情。但是有一个bug我正试图解决。当用户直接在输入中写入日期时，选择器也需要获取新值（因为我使用不同的格式提交日期，并且有一个隐藏的输入字段要更新）。为了做到这一点，我试着去做

picker.set('select', $(this.val());

但它会创建一个无限循环，因为materialize中的方法

set

也会触发输入上的事件

change

---

编辑：哦，我刚刚发现在github上有一个关于这个的公开消息。您对解决方法有什么想法吗？

您想在变更方法中解决问题的具体原因是什么？
为什么不像这样

this.change(function(event) {

});

this.bind('blur keypress',function(e){
  if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
      var inputFieldDate=getFmtDate($(this).val());
      picker.set('select',inputFieldDate);
  }

});

这是一个实用函数，用于解析

DD/MM/YYY

格式的日期并获取javascript对象

这对我有用。

更新： 一旦将小部件附加到html元素，通常的事件回调函数就不能按预期的方式工作。它们的功能被小部件覆盖。您不能像以前那样使用函数，必须找到解决方法。简而言之，您不能使用

change

功能设置或取消设置日期，因为set会触发

change

事件

在您的案例中，您希望解决多个非常常见的问题。你应该能够在网上找到很多例子来实现其中的每一个。我所做的只是一种方法

加载页面时，以非传统方式填充表单

当页面加载时，使用表单中的值初始化各种插件

在加载表单时初始化隐藏字段中的内容，并在提交表单时更新隐藏字段

按名称（隐藏字段）获取值，并使用它们初始化小部件

我使用了

模糊按键

只是想让您知道，您的所有需求都可以在不使用

更改

的情况下处理。您可以使用对您有效的事件。您可以通过使用

this

关键字将

picker

绑定到

calendar

对象并从其实例访问它来设置日期，如下所示

    (function($) {

      $.fn.calendar = function(options) {

    // Options du datepicker
        var settings = $.extend({
            editable: true,
            format: 'dd/mm/yyyy',
            formatSubmit: 'ddmmyyyy'
        },
        options
      );

    this.pickadate(settings);
    //var picker = this.pickadate(''); will not work
    this.picker = this.pickadate('picker');

    this.change(function(event) {

    });
    this.bind('blur keypress',function(e){
      if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
            var inputFieldDate=getFmtDate($(this).val());
          picker.set('select',inputFieldDate);
      }
    
    });

    var $triggerIcon = $('<div class="col s2 center-align"><a class="btn-floating btn-large waves-effect waves-light trigger-datepicker">Date</a></div>');
    $triggerIcon.click(function(event) {
      event.stopPropagation();
      event.preventDefault();
      picker.open();
    });
    this.parent().after($triggerIcon);
    // Resolves picker opening for thing
    this.next().unbind("focus.toOpen");
    return this;
      };
    }(jQuery));

您必须将日期转换为

date（）

。下面的函数应该给你一个想法。你也可以使用插件，比如plugin

这是你的html

<div class="row">
<div class="col s4">
  <input type="text" class="datepicker" />
  <input name="hiddenDate" type="hidden" value="12/12/2016">
</div>
</div>

---

好的，您的解决方案有效。但很抱歉，这是一个解决办法。绑定其他事件以不触发“更改”事件似乎不是正确的方法。我不能接受鄙视我使用过它，我可以说它有效。

//This is how you set a date
var cal = $('.datepicker').calendar();
//You can access picker because we changed
//var picker to
//this.picker above in fn.calendar
cal.picker.set('select', getFmtDate($("[name=hiddenDate]").val()));
// The syntax is 
//cal.picker.set('select', new Date());

$('#formulaireDate').validate();

function getFmtDate(s){
    var valx=new Array();
      if(s!=null && s.length>0){
                        valx = s.split('/');
              }
  var d = new Date(valx[2],valx[1]-1,valx[0]);
  return d;
}

<div class="row">
<div class="col s4">
  <input type="text" class="datepicker" />
  <input name="hiddenDate" type="hidden" value="12/12/2016">
</div>
</div>