如何使实现日期选择器(实际上是pickadate)可编辑？

Question

我正在尝试使实体日期选择器可编辑.这是目标,用户可以直接在输入字段中写日期或使用小部件来选择日期.

我做了一些即将在这个jsfiddle上工作的东西.但是我正试图解决一个错误.当用户直接在输入中写入日期时,选择器也需要获取新值(因为我使用不同的格式来提交日期,并且有一个隐藏的输入字段要更新).要做到这一点,我试着这样做

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

但是它会创建一个无限循环,因为实现中的方法set也会触发change输入上的事件.

编辑:哦,我刚刚发现在github上存在一个问题.你对解决方法有什么想法吗？

Answer 1

您想在更改方法中执行此操作的具体原因是什么？
为什么不这样的？

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 Date对象

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

这适合我.

更新:

将小部件附加到html元素后,通常的事件回调函数将无法按预期方式工作.它们的功能被窗口小部件覆盖.您不能像以前那样使用这些功能,必须找到解决方法.简而言之,您无法使用该change函数来设置或取消设置日期,因为将triggrers设置为change事件.

在您的情况下,您想要解决多个常见问题.您应该能够在线获得大量示例以实现其中的每一个.我所做的只是一种方式.

1. 在页面加载时以非传统方式填充表单.
2. 在页面加载时使用表单中的值初始化各种插件
3. 在表单加载时从隐藏字段初始化内容,并在提交表单时更新隐藏字段.
4. 按名称(隐藏字段)获取值,并使用它们初始化窗口小部件.

我blur keypress只是想让你知道所有的要求都可以在不使用的情况下处理change.您可以使用适合您的活动.您可以通过使用关键字绑定picker到calendarobject 来设置日期,this并从其实例访问它,如下所示.

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

要设置日期:

//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();

你必须将你的日期转换为Date().以下功能应该给你一个想法.你也可以使用像jquery dateFormat插件这样的插件.

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

这是你的HTML.

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