javascript onChange does not work with DateInput

3 posts, 0 answers
  1. Thomas
    Thomas avatar
    4 posts
    Member since:
    Mar 2014

    Posted 14 Dec 2015 Link to this post

    I have some of my own JavaScript that I call from the onChange event in a Telerik DateInput. When the user enters a date with the native DateInput entry shortcut ("1/1" and then tab which fills in the year), my JavaScript does not execute properly. If the user types in the entire date manually and then tabs off of the DateInput, then my JavaScript will execute properly. I have in cluded my code and markup. I also tried moving the placement of my JS include to the end of the <body> but that causes different problems.

          <telerik:RadDateInput ID="BillStartDt" runat="server" Skin="Default" Width="90px" TabIndex="10" onChange="calcNumberOfDays();">
     <td>End Date</td>
     <td style="width: 170px">
          <telerik:RadDateInput ID="BillEndDt" runat="server" Skin="Default" Width="90px" TabIndex="11" onChange="calcNumberOfDays();" >
         <asp:Label ID="lblDateError" runat="server" Font-Size="9px"></asp:Label>


    function calcNumberOfDays() {
        //uses moment.js library for date calculations

        var startDateBox = document.getElementById("BillStartDt").value
        var endDateBox = document.getElementById("BillEndDt").value
        if ((!(startDateBox == "" || startDateBox.length == 0 || startDateBox == null) && (!(endDateBox == "" || endDateBox.length == 0 || endDateBox == null)))) {
            var StartDate = moment(document.getElementById("BillStartDt").value); //Convert.ToDateTime(BillStartDt.SelectedDate);
            var EndDate = moment(document.getElementById("BillEndDt").value); //Convert.ToDateTime(BillEndDt.SelectedDate);
            var NumberOfDays = EndDate.diff(StartDate, 'days');;

            document.getElementById("lblDateError").innerText = NumberOfDays;//lblDateError.Text = NumberOfDays.ToString() + " Days";
            if ((NumberOfDays > 60) || (NumberOfDays < 0)) {
                document.getElementById("lblDateError").style.color = 'red';
            else {
                document.getElementById("lblDateError").style.color = 'green';

  2. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 17 Dec 2015 Link to this post

    Hi Thomas,

    You are handling an event of the INPUT element, but the RadDateInput have its own events and logic, so you need to modify your implementation to handle the control's events instead. Looking at your logic you could handle the client-side OnValueChanged event instead and use the client-side API of the control to retrieve the value:
    Keep in mind that when you enter "1/1" for example, there value needs to be parsed to a valid date, before it is set to the control. That is whey the date is not present within the INPUT's onchange event.

    Hope this helps.

    Konstantin Dikov
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Thomas
    Thomas avatar
    4 posts
    Member since:
    Mar 2014

    Posted 25 Dec 2015 in reply to Konstantin Dikov Link to this post

    Thank you for this. This is exactly what I needed. 
Back to Top