两个js:moment-with-locales.min.js , bootstrap-datetimepicker.min.js
<script src="<c:url value="/resources/frameworks/pangolin/js/moment-with-locales.min.js" />"></script>
<script src="<c:url value="/resources/frameworks/pangolin/js/bootstrap-datetimepicker.min.js" />"></script>
一个样式css:bootstrap-datetimepicker.min.css
<link href="<c:url value="/resources/frameworks/pangolin/css/bootstrap-datetimepicker.min.css" />" rel="stylesheet" />
$(function(){}//初始化下面代码。
//时间控件数据绑定
ko.bindingHandlers.dateTimePicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().dateTimePickerOptions || {};
$(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)) {
if (event.date != null && !(event.date instanceof Date)) {
value(event.date.toDate());
} else {
value(event.date);
}
}
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
var picker = $(element).data("DateTimePicker");
if (picker) {
picker.destroy();
}
});
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var picker = $(element).data("DateTimePicker");
//when the view model is updated, update the widget
if (picker) {
var koDate = ko.utils.unwrapObservable(valueAccessor());
//in case return from server datetime i am get in this form for example /Date(93989393)/ then fomat this
koDate = (typeof (koDate) !== 'object') ? new Date(parseFloat(koDate)) : koDate;
picker.date(koDate);
}
}
};
然后在input中就可以使用了
data-bind="dateTimePicker:visitDate"
<div class="form-group">
<label class="col-sm-2 control-label">来访时间</label>
<div class="col-sm-8" data-bind="with: visitorVM">
<input type="type" class="form-control" name="visitDate" data-bind="dateTimePicker:visitDate" placeholder="来访时间" />
</div>
</div>