twitter-bootstrap 用knockoutjs绑定bootstrap datepicker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14416592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bind bootstrap datepicker with knockoutjs
提问by Gericke
I want to use a bootstrap datepicker and to bind the selected date with knockoutjs.
我想使用引导程序日期选择器并将所选日期与knockoutjs 绑定。
the function that uses the datepicker:
使用日期选择器的函数：
$(function() {
// create the departure date
$('#depart-date').datepicker({
autoclose: true,
format: 'yyyy/mm/dd',
}).on('changeDate', function(ev) {
ConfigureReturnDate();
});
$('#return-date').datepicker({
autoclose: true,
format: 'yyyy/mm/dd',
startDate: $('#depart-date').val()
});
// Set the min date on page load
ConfigureReturnDate();
// Resets the min date of the return date
function ConfigureReturnDate() {
$('#return-date').datepicker('setStartDate', $('#depart-date').val());
}
});
Here is a fiddle that I want to use but is not sure how to go about doing so. http://jsfiddle.net/zNbUT/276/
这是我想使用的小提琴，但不知道如何去做。 http://jsfiddle.net/zNbUT/276/
采纳答案by Gericke
I found a fiddle that will help me http://jsfiddle.net/jearles/HLVfA/6/
我找到了一个可以帮助我的小提琴 http://jsfiddle.net/jearles/HLVfA/6/
Functionality from the fiddle:
来自小提琴的功能：
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options).on("changeDate", function (ev) {
var observable = valueAccessor();
observable(ev.date);
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).datepicker("setValue", value);
}
};
回答by Jacques Bronkhorst
I also used bootstrap-datepicker.jsbut in a different way:
我也使用了bootstrap-datepicker.js，但方式不同：
My Viewmodel:
我的视图模型：
var MyDataViewModel = {
//Set Todays Date
StartDate: ko.observable(new Date())
}
My HTML:
我的 HTML：
<div id="dtpDate" class="input-append">
<input required="required" id="txtdtpDate" data-format="yyyy-MM-dd" type="text" style="width: 75%;" />
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
And the JS to make it function:
和 JS 使其发挥作用：
$(function () {
$('#dtpDate').datetimepicker({
pickTime: false
})
.on('changeDate', function (ev) {
//Date.Subtring(1,10) for formatting purposes
MyDataViewModel.StartDate(ko.toJSON(ev.date).substr(1, 10));
});
});
});
And this works perfectly for me
这对我来说非常有效
