DateTimePicker：jQuery日期和时间插件

两个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>