Question

I code (see this jsfiddle) as follows:

<h2>Knockout with jQuery UI Widget Bindings</h2>

<div>
  <label for='from'>Date From:</label>
  <input id='from' type='text' 
    data-bind='jqueryui: "datepicker",
               value: from' />
  <small>(with datepicker)</small>
</div>

<div>
  <label for='to'>Date To:</label>
  <input id='to' type='text' 
    data-bind='jqueryui: "datepicker",
               value: to' />
  <small>(with datepicker)</small>
</div>

<select id="Range" name="Range" data-bind="value: range, options:ranges, optionsText:'name'">

And this Javascript:

var viewModel = {
    ranges : [
        {name:'Yesterday',value:'Yesterday'}, 
        {name:'Last7Days',value:'Last 7 Days'}, 
        {name:'Last14Days',value:'Last 14 Days'}, 
        {name:'LastFullWeek',value:'Last Full Week'}, 
        {name:'LastFullFortnight',value:'Last Full Fortnight'}, 
        {name:'LastFullThreeWeeks',value:'Last Full Three Weeks'}, 
        {name:'LastMonth',value:'Last Month'}, 
        {name:'MonthToDate',value:'Month To Date'}, 
        {name:'LastQuarter',value:'Last Quarter'}, 
        {name:'Select',value:'Select'}
    ],
    from: ko.observable(''),
    to: ko.observable(''),
    range: ko.observable('')
};
ko.applyBindings(viewModel);

I want to reset the date from and date to when I select a value from the drop down list.
In the same way, if I manually select a value via datepicker, I want to change the dropdownlist to be “Select”

Any idea on how to do this?

Answer 1

Manual subscriptions are a good option.

Something like: http://jsfiddle.net/rniemeyer/N58rf/

Basic idea is like:

viewModel.range.subscribe(function(newValue) {
    if (newValue && newValue.value !== 'Select') {
        this.from('').to('');
    }
}, viewModel);