我试图使物化日期选择器可编辑.这是目标,用户可以直接在输入字段中写入日期或使用小部件选择日期.
我做了一些要工作的东西on this jsfiddle.但是我想要解决的是一个bug.当用户直接在输入中写入日期时,选择器也需要获取新的值(因为我使用不同的格式来提交日期,并且有一个隐藏的输入字段来更新).为了做到这一点,我试图做
picker.set('select',$(this.val());
但是它创建一个无限循环,因为在物质化中设置的方法也会触发输入上的事件更改.
编辑：哦,我刚刚发现有一个issue在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 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元素后,通常的事件回调函数不会按照您期望的方式工作.它们的功能被小部件覆盖.您不能使用相同的方式使用这些功能,并且必须找到解决方法.简而言之,您不能使用更改功能来设置或取消设置日期,因为设置触发器是一个更改事件.
在你的情况下,你想解决多个问题,这是很常见的问题.你应该能够在线获得很多例子,以实现其中的每一个.我所做的只是一种做法.
>当页面加载时,以非传统方式填充表单.
>当页面加载时,使用表单中的值初始化各种插件
>当表单加载并在提交表单时更新隐藏字段,从隐藏字段初始化内容.
>通过名称(隐藏字段)获取值,并使用它们来初始化窗口小部件.
我已经使用了模糊按键,只是为了给你一个想法,所有的需求都可以处理,而不用改变.你使用适合你的事件.您可以通过将选择器绑定到具有此关键字的日历对象来设置日期,并从其实例访问它,如下所示.
(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(),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[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>