如何使具体化日期选取器(实际上是选取日期)可编辑
How to make the materialize date picker (in fact pickadate) editable?
我正在尝试使具体化日期选择器可编辑。这是目标,用户可以直接在输入字段中写入日期或使用小部件选择日期。
我做了一些即将在这个jsfiddle上工作的事情。但是我正在尝试解决一个错误。当用户直接在输入中写入日期时,选取器也需要获取新值(因为我使用不同的格式来提交日期,并且有一个隐藏的输入字段需要更新)。为了完成我试图做的事情
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 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
函数来设置或取消设置日期,因为将 triggrer 设置为change
事件。
在您的情况下,您希望解决多个非常常见的问题。您应该能够在线获得大量示例来实现其中的每一个。我所做的只是其中的一种方式。
- 在
- 页面加载时以非传统方式填充表单。
- 在页面加载时使用表单中的值初始化各种插件 加载表单时初始化隐藏
- 字段中的内容,并在提交表单时更新隐藏字段。
- 按名称(隐藏字段)获取值,并使用它们来初始化小部件。
我使用blur keypress
只是为了让您知道无需使用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));
要设置日期:
//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>
- 清除启动日期选取器值
- 启动日期选取器更改位置
- 带有日期选取器的事件
- Jquery 日期时间选取器错误
- 引导 3 日期选取器使用内联日历捕获日期
- 引导日期选取器不适用于文本框 asp.net
- 日期时间选取器日期格式
- 正在禁用jQuery UI日期选取器日期
- 如何在引导日期范围选取器日期更改时更新绑定
- Jquery UI 日期选取器日期格式
- 使用 jQuery 创建两个日期选取器日期范围实例
- 日期选取器日期范围:最大日期的最小日期 = 开始日期 + 1 天
- 通过从另一个日期选取器中选取日期来禁用 JQuery 日期选取器日期
- 将日期选取器日期拆分为单独的输入
- 复制时 JQuery 日期选取器日期格式问题
- 将日期选取器日期格式添加到动态生成的文本框,其中日期格式设置为属性
- jQuery:抓取日期&来自网页的时间数据
- 设置在上一个日期选取器中选取的日期的最小日期
- 是否有可能从silverlight应用程序(如freestockcharts)中抓取日期?
- jquery ui - JavaScript钻取日期picker