我正在使用这个 Bootstrap 日期时间选择器:http://eonasdan.github.io/bootstrap-datetimepicker/
我为 DateTime 创建了一个名为 datepicker 的自定义绑定(bind)器:
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {format: 'DD/MM/YYYY HH:mm'};
$(element).datetimepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "dp.change", 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();
}
}
}
};
我的模型采用 JSON 格式,当我将 C# dateTime 转换为 JSON 时,我得到这个日期:"/Date(1427368178393)/"
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Quote Date</label>
<div class='input-group date dateTimes'>
<input type="text" class="form-control" data-bind="datepicker: QuoteDateTime" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
但问题是,第一次加载页面时,即使 QuoteDateTime 有一个值,它也不会显示在 DateTimePicker 中。
这是 JSFiddle:
https://jsfiddle.net/mdawood1991/ezv7qxbt/
我需要在日期时间选择器中显示第一个值。
编辑
问题是我的 ViewModel 有一个住宿列表
这是我的 viewModel 的控制台日志
我可以按照你的建议将每个日期时间转换为一个时刻,但是我不应该使用 knockout 映射插件:http://knockoutjs.com/documentation/plugins-mapping.html
这是循环遍历我的 viewModel 然后将所有日期时间转换为时刻对象的唯一解决方案
最佳答案
在 @David 和 @Bryant 的帮助下,我更改了代码以使用时刻对象日期更新 viewModel。
问题在于,只有从日期时间选择器中选择日期后,日期才能正确发回。所以我更改了代码,以便在初始化时更新 viewModel。现在它正在发挥作用。
这是日期时间选择器
http://eonasdan.github.io/bootstrap-datetimepicker/
我使用了以下日期选择器绑定(bind)。
JSFiddle 工作:http://jsfiddle.net/mdawood1991/cL9k2sbe/
我的解决方案:
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
//initialize datepicker with some optional options
var options = {
format: 'DD/MM/YYYY HH:mm',
defaultDate: valueAccessor()()
};
if (allBindingsAccessor() !== undefined) {
if (allBindingsAccessor().datepickerOptions !== undefined) {
options.format = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : options.format;
}
}
$(element).datetimepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "dp.change", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
var defaultVal = $(element).val();
var value = valueAccessor();
value(moment(defaultVal, options.format));
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var thisFormat = 'DD/MM/YYYY HH:mm';
if (allBindingsAccessor() !== undefined) {
if (allBindingsAccessor().datepickerOptions !== undefined) {
thisFormat = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : thisFormat;
}
}
var value = valueAccessor();
var unwrapped = ko.utils.unwrapObservable(value());
if (unwrapped === undefined || unwrapped === null) {
element.value = new moment(new Date());
console.log("undefined");
} else {
element.value = unwrapped.format(thisFormat);
}
}
};
关于datetime - knockout 日期时间选择器 - 默认日期不绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29283815/