Bootstrap DatePicker for editing by text input
In my current project, I am using Bootprap datepicker so that users can pick dates.
There was a request to allow people to enter a date in the datePicker instead of manually clicking on the dates in the widgets.
Currently, when the user manually edits the date string, the date picker will highlight the correct day, but will not update the variable it is assigned to. (As a side note, I am using Knockout.js and using an observable to store the date)
My thoughts were that this would just call the changeDate function, but it doesn't.
Has anyone tried to achieve this and make it work?
source to share
Here is a working jsfiddle and a gist of bindings datePicker
and dateValue
that bind independently to the observable and update it accordingly.
<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>
Associations are written using a wrapper BindingHandlerFactory
that 1. creates a handler object for each associated element and stores it with $.data()
on the element.
2. calls the handler initialize(element, context)
once.
3. call the handler method contextChanged(context)
every time the binding context changes.
source to share
Why don't you use the Read / Write options with KO.
something like
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
});
}
source to share