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
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:
- http://docs.telerik.com/devtools/aspnet-ajax/controls/dateinput/client-side-programming/raddateinput-client-object
- http://docs.telerik.com/devtools/aspnet-ajax/controls/dateinput/client-side-programming/events/onvaluechanged
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
Rank 1