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

javascript onChange does not work with DateInput

2 Answers 154 Views
DateInput
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 14 Dec 2015, 03:53 PM

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.

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

 

function calcNumberOfDays() {
    //uses moment.js library for date calculations
    //http://momentjs.com/docs/#/displaying/difference/

    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 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 17 Dec 2015, 11:01 AM
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.


Regards,
Konstantin Dikov
Telerik
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
0
Thomas
Top achievements
Rank 1
answered on 26 Dec 2015, 12:38 AM
Thank you for this. This is exactly what I needed. 
Tags
DateInput
Asked by
Thomas
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Thomas
Top achievements
Rank 1
Share this question
or