This is a migrated thread and some comments may be shown as answers.

Change value displayed in DatePicker text input

3 Answers 259 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Jacob
Top achievements
Rank 2
Jacob asked on 12 Jun 2015, 02:47 PM

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);
    }
});

3 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 16 Jun 2015, 02:20 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jacob
Top achievements
Rank 2
answered on 17 Jun 2015, 08:35 PM

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);
        }
      });

0
Kiril Nikolov
Telerik team
answered on 19 Jun 2015, 01:12 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Date/Time Pickers
Asked by
Jacob
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Jacob
Top achievements
Rank 2
Share this question
or