Telerik RadDatePicker problem in ClientIDMode="Static"

Question

var StartDate = $('#dtStartDate').val();
var EndDate = $('#dtEndDate').val();
alert(StartDate);
alert(EndDate);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Start Date</td>
    <td>
      <telerik:RadDatePicker ID="dtStartDate" CssClass="Telepicker" runat="server" ZIndex="100000" ClientIDMode="Static" DateInput-EmptyMessage="dd/mm/yyyy" Culture="English (United States)">
        <DateInput ID="DateInput1" DateFormat="dd/MM/yyyy" runat="server"></DateInput>
        <Calendar ID="Calendar1" runat="server" EnableKeyboardNavigation="true" ShowRowHeaders="False" MonthLayout="Layout_7columns_x_6rows" DayNameFormat="FirstLetter" ShowOtherMonthsDays="false">
          <SpecialDays>
            <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Bisque" />
          </SpecialDays>
        </Calendar>
        <DatePopupButton ImageUrl="Calendar.gif" HoverImageUrl="Calendar.gif" />
      </telerik:RadDatePicker>
    </td>
    <td>End Date</td>
    <td>
      <telerik:RadDatePicker ID="dtEndDate" CssClass="Telepicker" runat="server" ZIndex="100000" ClientIDMode="Static" DateInput-EmptyMessage="dd/mm/yyyy" Culture="English (United States)">
        <DateInput ID="DateInput2" DateFormat="dd/MM/yyyy" runat="server">
        </DateInput>
        <Calendar ID="Calendar2" runat="server" EnableKeyboardNavigation="true" ShowRowHeaders="False" MonthLayout="Layout_7columns_x_6rows" DayNameFormat="FirstLetter" ShowOtherMonthsDays="false">
          <SpecialDays>
            <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Bisque" />
          </SpecialDays>
        </Calendar>
        <DatePopupButton ImageUrl="Calendar.gif" HoverImageUrl="Calendar.gif" />
      </telerik:RadDatePicker>
    </td>
  </tr>
</table>

Without using ClientIDMode="Static" I can't able to get the date value in Jquery.

But when I use ClientIDMode="Static" in both Telerik RadDatePicker (Start and End) after clicking start date calendar is showing for end date.

I think I'm messed up with both ID's.

Please help me with this. How to get both Telerik RadDatePicker (start and End) values in Jquery.

Answer 1

I found some documentation that looks like below. I think static IDs should work.

// get the date picker.
var datePicker = $("#dtStartDate");
// get the selected date from the date picker.
var date = datePicker.get_selectedDate();

Or, in one line:

var date = $("#dtStartDate").get_selectedDate();

I hope that's not from old docs.