这个问题类似于knockoutjs数据绑定使用jQuery UI的日期选择器 ，但不是jQueryUI的日期选择器，我想用一个引导datepickers 。
自举日期选择器的API是jQuery的UI不同，我有一些麻烦缠绕我的头周围使其与knockout.js工作。 我创建了一个的jsfiddle尝试一下 。
这似乎是引导日期选择器可更易于使用，因为它并不是独立存储日期。 不过，我想知道怎么的jsfiddle是否使用与knockout.js即引导日期选择器插件的适当的方式
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
update: function(element, valueAccessor) {
}
};
下面是如何，你可以与你正在使用的日期选择器实现这一点的例子：
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function(event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function(element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
if (widget.date) {
widget.setValue();
}
}
}
};
它看起来不像有任何破坏的功能，所以我删除的那件。 该处理部件changeDate事件来更新视图模型，当用户更改日期。 该update的时候视图模型改变为更新的部件函数处理。
如果您想将值设置为不可观察的约束的话，那就需要多一点的代码。 让我知道这是你需要支持的时候。
http://jsfiddle.net/rniemeyer/KLpq7/
我目前的版本是已经表现出解决方案之间的混合：
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var binding = allBindingsAccessor();
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
$(element).datepicker('update', dataSource());
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
var value = ko.utils.unwrapObservable(valueAccessor());
//when the view model is updated, update the widget
if (widget) {
widget.date = value;
if (widget.date) {
widget.setValue();
$(element).datepicker('update', value)
}
}
}};
接受的答案并没有为我的日期选取器的当前版本。 输入没有被与观察到的值进行初始化。 我做了一个更新的绑定，而我添加了这个：
$(element).datepicker('update', dataSource());
这似乎这样的伎俩。
下面是一个使用最新的可用日期选择器，引导，jQuery和淘汰赛更新的小提琴： http://jsfiddle.net/krainey/nxhqerxg/
更新：
我经历了一些困难日期选取器不与观察到很好的播放时，用户会手动编辑的文本字段中的值。 该工具会立即解析日期，并将结果插入输入字段。
如果用户尝试编辑2014年10月7日，例如，和所使用的退格或删除来删除数（10/0/2014），所得到的值，可以立即将解析并插入到文本输入。 如果值是，片刻，10/0/2014，机械手将日历转移到二○一四年九月三十○日，插拔该值的文本字段。 如果我尝试编辑月份，和值，片刻，2014年1月7日，机械臂将转移至2014年1月7日，并在文本字段插入该值。
你可以看到在这个小提琴该行为：
http://jsfiddle.net/krainey/nxhqerxg/10/
我不得不更新我用特殊处理程序结合来检测对焦，并结合一次性模糊事件得到它正确地处理手动编辑。
$(element).on("changeDate", function (ev) {
var observable = valueAccessor();
if ($(element).is(':focus')) {
// Don't update while the user is in the field...
// Instead, handle focus loss
$(element).one('blur', function(ev){
var dateVal = $(element).datepicker("getDate");
observable(dateVal);
});
}
else {
observable(ev.date);
}
});
在原来的答案引用的小提琴已经被更新，以反映这一点：
http://jsfiddle.net/krainey/nxhqerxg/
以下是我结束了
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = {
autoclose: true,
format: 'yyyy-mm-dd',
}
//var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
var myDate = event.date;
var month = myDate.getMonth() + 1;
var monthText = month;
if (month < 10)
monthText = "0" + month;
var day1 = parseInt(myDate.getDate());
var dayText = day1;
if (day1 < 10)
dayText = '0' + day1;
value(myDate.getFullYear() + '-' + monthText + '-' + dayText);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
widget.setValue(widget.date);
}
}};
