Knockout datepicker总是可见的

Question

感谢这个post我知道如何创建一个日期选择器。

不幸的是，我不能让日期选择器始终可见，不仅仅当有人点击该字段时。

我用小修改here做原始小提琴的叉子。在这个副本中，我有两个日期输入。我有一个问题，使日期选择器始终可见。 任何想法如何解决它？

HTML

<input data-bind="datepicker: startDate, datepickerOptions: { minDate: new Date() }" /> 
<input data-bind="datepicker: endDate, datepickerOptions: { minDate: new Date() }" /> 

<hr /> 

<button data-bind="click: setToCurrentDate">Set To Current Date</button> 

<hr /> 

<div data-bind="text: myDate"></div> 

JS

ko.bindingHandlers.datepicker = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     var $el = $(element); 

     //initialize datepicker with some optional options 
     var options = allBindingsAccessor().datepickerOptions || {}; 
     $el.datepicker(options); 

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

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

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

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

var viewModel = { 
    startDate: ko.observable(new Date("12/01/2013")), 
    endDate: ko.observable(new Date("12/01/2013")), 
    setToCurrentDate: function() { 
     this.startDate(new Date()); 
     this.endDate(new Date()); 
    } 
}; 

ko.applyBindings(viewModel); 

Answer 1

要使日期选择可见的所有绑定它的时候到<div>而不是<input />。

<div data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }"></div>