Question

I have a knockout object which contains a single property called created. This property of time Date contains the date of an event. Then in my html form I have two selectbox inputs: the first is for the hours and the second is for the minutes. These allow the user to select the time, then the selected values should be set on the created property. The following is an example of the code of my form:

<form action="..." method="...">
    <select name="hours">
        <option value="8">8</option>
        <option value="9">9</option>
        ...
        <option value="22">22</option>
    </select>
    <select name="minutes">
        <option value="0">0</option>
        ...
        <option value="30">30</option>
    </select>

    ...
</form>

It’s a really simple form, however I don’t understand how I could bind that inputs to the created value and update only the portion of date that belongs to each input. Basically, when I select an option of the first input I should update the date’s hours and when I select an option of the second input the date’s minutes should be updated.

Answer 1

I would do this by adding a computed observable into the mix and store the selected minutes and hour in their constituent parts.

Here is a slightly contrived example, but shows the general principle. The computed here is simply concatenating the hour an minute parts together, but presumably you would instantiate a Date object instead to do what you need to do:

function TimeModel(options) {
    var self = this;

    self.hourOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    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();
    });
}

I would then bind the hourOptions and minuteOptions to the respective select boxes and all should be good 🙂

Check this fiddle for a working solution: http://jsfiddle.net/WickyNilliams/ejjHp/