自定义Flatpickr绑定
自定义Flatpickr绑定
提问于 2017-01-11 17:19:57
我试图为弗拉特皮尔创建一个敲除绑定，但是没有运气。我尝试从接受的答案这里中调整代码，但没有效果。已经初始化了Flatpickr，但是它似乎没有使用我设置的默认选项，绑定的更新部分根本不起作用。
我的密码在下面。我会创建一个jsFiddle，但是它在工作时会被阻塞。
ko.bindingHandlers.datetimepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().datetimepickerOptions || { dateFormat: 'm-d-Y', enableTime: true };
var $el = $(element);
$(element).flatpickr(options);
//handle the field changing by registering datepicker's changeDate event
ko.utils.registerEventHandler(element, "onChange", function () {
var observable = valueAccessor();
observable($el.val());
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$el.flatpickr("destroy");
});
$el.val(new Date(ko.utils.unwrapObservable(valueAccessor())));
},
update: function (element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var $el = $(element);
// handle json date from microsoft
if (String(value).indexOf('/Date(') == 0) {
value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
}
var current = new Date($el.val());
if (value - current !== 0) {
$el.flatpickr('setDate', value);
}
}
};编辑
更多关于我情况的信息。我有一个页面顶部有寻呼机按钮，这些按钮循环在我的视图模型中的数组中。每次我页面时，都会将displayedRecord属性设置为数组中的下一个/prev项，所有编辑字段都绑定到displayedRecord属性。这对于我的所有输入都很好，除了那些使用@atits最佳绑定的日期选择器绑定给我的输入。
日期选择器字段第一次被填充，但是一旦我页面超过它们，该记录的viewmodel属性就会被设置为null。
编辑2
终于成功了。这是最后的产品。最后删除init函数中的订阅，因为它在尝试将其设置为空时会导致错误。还增加了平板泡菜包装功能，为用户提供自己的按钮，以清除，切换等。
ko.bindingHandlers.flatpickr = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = $.extend({
dateFormat: 'm/d/Y H:i',
enableTime: true,
time_24hr: true,
minuteIncrement: 1
}, allBindingsAccessor().flatpickrOptions);
var $el = $(element);
var picker;
if (options.wrap) {
picker = new Flatpickr(element.parentNode, options);
} else {
picker = new Flatpickr(element, options);
}
// Save instance for update method.
$el.data('datetimepickr_inst', picker);
// handle the field changing by registering datepicker's changeDate event
ko.utils.registerEventHandler(element, "change", function () {
valueAccessor()(picker.parseDate($el.val()));
});
// handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$el.flatpickr("destroy");
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
// Get datepickr instance.
var picker = $(element).data('datetimepickr_inst');
picker.setDate(ko.unwrap(valueAccessor()));
}
};回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-12 08:13:22
我创建了一个小提琴，并对绑定做了一些修改：
- 将事件名从"onChange“更改为"change"；现在它会触发。
- 创建了一些默认选项，即使设置了高级自定义选项；对于默认的dateFormat也很有用。
- 将" update“函数替换为订阅以更新可观察到的；
- 绑定值现在总是一个日期。
新的装订：
ko.bindingHandlers.datetimepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
var options = $.extend({
dateFormat: 'm-d-Y H:i',
enableTime: true
}, allBindingsAccessor().datetimepickerOptions),
$el = $(element),
picker = new Flatpickr(element, options),
observable = valueAccessor();
//handle the field changing by registering datepicker's changeDate event
ko.utils.registerEventHandler(element, "change", function() {
observable(picker.parseDate($el.val()));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$el.flatpickr("destroy");
});
observable.subscribe(function(newVal) {
$el.val(picker.formatDate(options.dateFormat, newVal));
});
picker.setDate(ko.unwrap(observable));
}
};希望这能有所帮助。
更新
为了处理分页，我更改了绑定。下面是更新的小提琴，用于测试分页场景的绑定。在这里，新的绑定代码：
ko.bindingHandlers.datetimepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
var options = $.extend({
dateFormat: 'm-d-Y H:i',
enableTime: true
},
allBindingsAccessor().datetimepickerOptions),
$el = $(element),
picker = new Flatpickr(element, options);
// Save instance for update method.
$el.data('datetimepickr_inst', picker);
// handle the field changing by registering datepicker's changeDate event
ko.utils.registerEventHandler(element, "change", function() {
valueAccessor()(picker.parseDate($el.val()));
});
// handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$el.flatpickr("destroy");
});
// Update datepicker with new value from observable
valueAccessor().subscribe(newVal => $el.val(picker.formatDate(options.dateFormat, newVal)));
},
update: function(element, valueAccessor, allBindingsAccessor) {
// Get datepickr instance.
var picker = $(element).data('datetimepickr_inst');
picker.setDate(ko.unwrap(valueAccessor()));
}
};希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41596915
复制相关文章
相似问题
腾讯云开发者
