Change value displayed in DatePicker text input

[Jacob]

Hi,

Since there is no built in way to select multiple dates in one DatePicker, we are building our own with a few modifications to the regular DatePicker (the UserVoice request for what we need is here: http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/4122749-add-range-select-to-datepicker).  One problem we are facing is that we cannot figure out how to modify the "value" displayed in the text input for the DatePicker. After the user selects a 2nd date, we would like to show the range they selected in the input. How can we do this?

Here are some things I have experimented with: 

$("#datepicker").kendoDatePicker({
    value: new Date(2013, 10, 10),
    change: function (e) {
      var exampleRangeSelectionText = (new Date("2015-6-6")).toLocaleDateString() + " - " + (new Date("2015-6-8")).toLocaleDateString();
      
      console.log(exampleRangeSelectionText);
      
      //Does NOT work
      this.value(exampleRangeSelectionText);
      
      //Does NOT work
      //$("#datepicker").attr("value", exampleRangeSelectionText);
    }
});

[Kiril Nikolov]

Hello Jacob,

The thing is that the widget will expect a valid JavaScript object to be set as avalue. What you can do is to update the input with the concatenated values as in this example. Please note however that this is not officially supported.

Regards,
Kiril Nikolov
Telerik

 

 

[Jacob]

Thank you for the information, Kiril. 

 We should be able to work with something like this, and we will test it on every upgrade.

 var firstDate = new Date("2015-6-6");
      $("#datepicker").kendoDatePicker({
        change: function() {
          if (firstDate !== null) {
            debugger;
            firstDate = firstDate.toLocaleDateString() + " - " + this.value().toLocaleDateString();
          } else {
            firstDate = this.value();
          }
          $("#datepicker").val(firstDate);
        }
      });

[Kiril Nikolov]

Hello,

I am happy to hear that you found that solution helpful. It will work in most cases and I do not believe that it will be changed anytime soon from our side, but still it is always good to test your code anyway :)

Have a nice weekend.

Regards,
Kiril Nikolov
Telerik