Use the pickadate binding on any input[type="text"] element.
window.view1 = {
date: ko.observable()
};
ko.applyBindings(view1, $('#simple-example-section .result')[0]);
<input type='text' data-bind='pickadate: date'>
<p>
<strong>Value:</strong>
<span data-bind='text: date'></span>
</p>
The following options can be passed as the pickadate_options binding:
See Pickadate for a list of options available. All options specified in pickadate_options will be passed to pickadate.
window.view2 = {
date: ko.observable(),
pickadateOptions: {
format: "yyyy",
onOpen: function() {
console.log('opened!')
}
}
};
ko.applyBindings(view2, $('#pickadate-options-example .result')[0]);
<input type='text' data-bind='pickadate: date, pickadate_options: pickadateOptions'>
<p>
<strong>Value:</strong>
<span data-bind='text: date'></span>
</p>
Set to true to enable the addon.
Values: true, false, 'before', 'after'
Note: 'before' will put it to the left of the input, anything else (except falsy values) will put it to the right
Default: false
Note: Requires Bootstrap 3 and Font Awesome
window.view3 = {
date: ko.observable(),
pickadateOptions: {
calendar_addon: 'before',
clear_button_addon: 'after'
}
};
ko.applyBindings(view3, $('#calendar-addon-example .result')[0]);
<input type='text' data-bind='pickadate: date, pickadate_options: pickadateOptions'>
<p>
<strong>Value:</strong>
<span data-bind='text: date'></span>
</p>
Set to true to make the binding update the observable with a JavaScript Date object instead of text.
Default: false
window.view5 = {
date: ko.observable(),
pickadateOptions: {
update_as_date: true
}
};
ko.applyBindings(view5, $('#update-as-date-example .result')[0]);
<input type='text' data-bind='pickadate: date, pickadate_options: pickadateOptions'>
<p>
<strong>Value:</strong>
<span data-bind='text: date'></span>
</p>