CODEWITHSUNDEEP
javascripthtmlknockout.js
NebDaMin
NebDaMin

Reputation: 658

Dropdown to modify textbox value with knockout

The following html/JavaScript is my attempt to make a dropdown menu modify two values in text boxes.

<select type="date" data-bind="options: dateranges, 
optionsText: 'rangeName', optionsCaption: 'Choose' ">
<select>
<br>
<input type="date" data-bind="value: rangeStartVal , valueUpdate: 'afterkeydown'" />
<br />
<input type="date" data-bind="value: rangeStopVal , valueUpdate: 'afterkeydown'" />

<script type="text/javascript">
    var RangeValue = function (name, startVal, stopVal) {
        this.rangeName = name;
        this.rangeStartVal = startVal;
        this.rangeStopVal = stopVal;
        return
    };

    var viewModel = {

        dateranges: ko.observableArray([
        new RangeValue("Today", "2014-04-28", "2014-04-28"),
        new RangeValue("Yesterday", "2014-04-27", "2014-04-27"),
        new RangeValue("This Week", "2014-04-28", "2014-05-04"),
        new RangeValue("Last Week", "2014-04-21", "2014-04-27"),]),
    };

    ko.applyBindings(viewModel);
</script>

I want whenever I change the value in the dropdown to modify the values in each of the textboxes one is the start value, and one is the stop value.

Upvotes: 0

Views: 716

Answers (2)

milagvoniduak
milagvoniduak

Reputation: 3254

You have to define a property that will hold the selected range. And than bind your inputs to the rangeStartVal and rangeStopVal properties of the selectedRange.

FIDDLE

Also you will notice the IF binding, it will basically not bind anything and hide elements unless you have selectedRange set.

<select type="date" data-bind="options: dateranges, 
optionsText: 'rangeName', optionsCaption: 'Choose', value: selectedRange ">
<select>
<br>
<div data-bind="if: selectedRange() != undefined">
<input type="date" data-bind="value: selectedRange().rangeStartVal , valueUpdate: 'afterkeydown'" />
<br />
<input type="date" data-bind="value: selectedRange().rangeStopVal , valueUpdate: 'afterkeydown'" />
</div>

Your View Model:

var RangeValue = function (name, startVal, stopVal) {
    var self = this;
    self.rangeName = name;
    self.rangeStartVal = startVal;
    self.rangeStopVal = stopVal;
};

function myVm() {
    var self = this;
    self.dateranges = ko.observableArray([
        new RangeValue("Today", "2014-04-28", "2014-04-28"),
        new RangeValue("Yesterday", "2014-04-27", "2014-04-27"),
        new RangeValue("This Week", "2014-04-28", "2014-05-04"),
        new RangeValue("Last Week", "2014-04-21", "2014-04-27")]);

    self.selectedRange = ko.observable();
}
var viewModel = new myVm();
ko.applyBindings(viewModel);

Upvotes: 1

Nish
Nish

Reputation: 1137

    <select type="date" data-bind="options: dateranges,
            optionsText: 'rangeName', optionsCaption: 'Choose',value:key ">
    </select>
    <br>
    <input type="date" data-bind="value: selectedRangeObj.start , valueUpdate: 'afterkeydown'" />
    <br />
    <input type="date" data-bind="value: selectedRangeObj.end , valueUpdate: 'afterkeydown'" />

    <script type="text/javascript">

        function viewModel() {
            var self = this;
            self.dateranges = [
                {key: "Today", start: "2014-04-28", end: "2014-04-28"},
                {key: "Yesterday", start: "2014-04-27", end: "2014-04-27"},
                {key: "This Week", start: "2014-04-28", end: "2014-04-05"},
                {key: "This Week", start: "2014-04-21", end: "2014-04-27"}];
            self.selectedRange = ko.observable();
            self.selectedRangeObj = ko.computed(function() {
                var match = ko.utils.arrayFirst(dateranges(), function(item) {
                    return selectedRange() === item.key;
                });
            }, this);
        }
        var myViewModel = new ViewModel();
    </script>

Upvotes: 0

Related Questions