Question

In my current project I am using the Bootstrap datepicker to allow users to select dates.

There has been a request to allow people to type the date into the datePicker input rather than having to manually click on the dates in the widget.

Currently when a user manually edits the date string, the date picker will highlight the correct day, but it will not update the variable it is assigned to. (As a note I am using Knockout.js and using an observable for storing the date)

My thoughts were that this would simply trigger the changeDate function but it does not.

Has anyone ever tried to achieve this and get it working?

Answer 1

Here is a working jsfiddle and a gist of the datePicker and dateValue bindings, which bind independently to an 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>

The bindings are written with a BindingHandlerFactory wrapper that
1. creates a handler object for each element bound and stores it with $.data() on the element.
2. calls the handler’s initialize(element, context) once.
3. call the handler’s contextChanged(context) method every time the binding context changes.