Bootstrap DatePicker, позволяющий редактировать с помощью ввода

Question

В моем текущем проекте я использую Datepicker Bootstrap, чтобы пользователи могли выбирать даты.

Был запрос, позволяющий людям вводить дату в datePicker, вместо того, чтобы вручную нажимать на даты в виджетах.

В настоящее время, когда пользователь вручную редактирует строку даты, средство выбора даты выделит правильный день, но не будет обновлять переменную, которой она назначена. (В качестве примечания я использую Knockout.js и используя наблюдаемый для хранения даты)

Мои мысли состояли в том, что это просто вызовет функцию changeDate, но это не так.

Неужели кто-нибудь пытался добиться этого и заставить его работать?

Answer 1

Вот working jsfiddle и gist из datePicker и dateValue привязок, которые связываются независимо друг от друга, чтобы наблюдаемый и обновлять его соответствующим образом.

<div class="input-append date"> 
    <input type="text" data-bind="dateValue: date" /> 
    <span class="add-on datepicker-button" data-bind="datePicker: { date: date }"> 
     <i class="icon-calendar"></i> 
    </span> 
</div> 

привязки написаны с BindingHandlerFactory обертки, что
1. создает объект обработчика для каждого элемента, связанного и сохраняет его с $.data() на элементе.
2. называет обработчик initialize(element, context) один раз.
3. вызовите метод обработчика contextChanged(context) каждый раз, когда изменяется контекст привязки.

Answer 2

Почему бы вам не использовать параметры чтения/записи с помощью KO.

что-то вроде

function yourModel(){ 
var self = this; 
self.theDateUserManuallyWillEnter = ko.computed({ 
read: function() { 
    if (self.theDateUserManuallyWillEnter != undefined) 
     return self.theDateUserManuallyWillEnter ; 
    else 
     return $('#theDateUserManuallyWillEnteredTextBox').val(); //Jquery  
           identifier of text box 
}, 
write: function (value) { 
    self.theDateUserManuallyWillEnter = value; 
}, 
owner: this 
}); 
}