Use the pickatime binding on any input[type="text"] element.
window.view1 = {
time: ko.observable()
};
ko.applyBindings(view1, $('#simple-example-section .result')[0]);
<input type='text' data-bind='pickatime: time'>
<p>
<strong>Value:</strong>
<span data-bind='text: time'></span>
</p>
The following options can be passed as the pickatime_options binding:
See Pickadate for a list of options available. All options specified in pickatime_options will be passed to pickatime.
window.view2 = {
time: ko.observable(),
pickatimeOptions: {
format: "hh",
onOpen: function() {
console.log('opened!')
}
}
};
ko.applyBindings(view2, $('#pickatime-options-example .result')[0]);
<input type='text' data-bind='pickatime: time, pickatime_options: pickatimeOptions'>
<p>
<strong>Value:</strong>
<span data-bind='text: time'></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 = {
time: ko.observable(),
pickatimeOptions: {
clock_addon: 'before',
clear_button_addon: 'after'
}
};
ko.applyBindings(view3, $('#clock-addon-example .result')[0]);
<input type='text' data-bind='pickatime: time, pickatime_options: pickatimeOptions'>
<p>
<strong>Value:</strong>
<span data-bind='text: time'></span>
</p>