ko time drop down view model

by kougiland

HTML

<div id="wrapper">
<form>

    <label> Hour:    <select data-bind="options: hourOptions, value:selectedHour"></select> </label>
    <label> Minutes: <select data-bind="options: minuteOptions, value:selectedMinute"></select></label>

</form>


    <p>Selected time is: <span data-bind="text: selectedDate"></span></p>
</div>

JavaScript

function TimeModel(options) {
    var self = this;

    self.hourOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13,14,15,16,17,18,19,20,21,22,23,24];
    self.minuteOptions = [0, 15, 30, 45];

    self.selectedHour = ko.observable(options.hour || 0);
    self.selectedMinute = ko.observable(options.minute || 0);

    self.selectedDate = ko.computed(function() {
        return self.selectedHour() + ":" + self.selectedMinute();
    });
}

ko.applyBindings(new TimeModel({
    hour : 0,
    minute : 0    
}), document.getElementById("wrapper"));