Change value displayed in DatePicker text input

4 posts, 1 answers
  1. Jacob
    Jacob avatar
    21 posts
    Member since:
    Dec 2011

    Posted 12 Jun 2015 Link to this post

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

  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 16 Jun 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Jacob
    Jacob avatar
    21 posts
    Member since:
    Dec 2011

    Posted 17 Jun 2015 in reply to Kiril Nikolov Link to this post

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

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Jun 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready