使用與KnockoutJS小時/分鐘下拉菜單jQuery UI的日期選擇器

Question

我有看起來像這樣的視圖模型：

var ViewModel = function() { 
    var self = this; 

    self.hourOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]; 
    self.minuteOptions = [0, 15, 30, 45]; 

    self.formatTimeOption = function(hour) { 
     if (hour < 10) return "0" + hour; 
      return hour.toString(); 
    }; 

    self.startDate = ko.observable(null); 

    self.startDateHour = ko.computed({ 
     read: function() { 
      return new Date(self.startDate()).getHours(); 
     }, 
     write: function(value) { 
      var newDate = new Date(self.startDate()); 
      newDate.setHours(value); 
      self.startDate(newDate); 
     } 
    }); 

    self.startDateMinute = ko.computed({ 
     read: function() { 
      return new Date(self.startDate()).getMinutes(); 
     }, 
     write: function(value) { 
      var newDate = new Date(self.startDate()); 
      newDate.setMinutes(value); 
      self.startDate(newDate); 
     } 
    }); 
}; 

正如你所看到的，我有計算觀察到一個可寫，更新起始日期小時/分鐘更新。
這是工作，然而，當它這樣做時，datepicker輸入字段顯示日期的長形式，而不是（例如）

2013年1月3日

的這個的jsfiddle在這裏可供選擇：http://jsfiddle.net/alexjamesbrown/2kSpL/9/

Answer 1

我解決了這個通過添加下列自定義綁定處理程序，從this answer

ko.bindingHandlers.datepicker = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     //initialize datepicker with some optional options 
     var options = allBindingsAccessor().datepickerOptions || {}; 
     $(element).datepicker(options); 

     //handle the field changing 
     ko.utils.registerEventHandler(element, "change", function() { 
      var observable = valueAccessor(); 
      observable($(element).datepicker("getDate")); 
     }); 

     //handle disposal (if KO removes by the template binding) 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).datepicker("destroy"); 
     }); 

    }, 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()), 
      current = $(element).datepicker("getDate"); 

     if (value - current !== 0) { 
      $(element).datepicker("setDate", value); 
     } 
    } 
}; 

拍攝

這裏有一個工作的jsfiddle：
http://jsfiddle.net/alexjamesbrown/v6hdS/