RadDateTimePicker -- client side set date

2 posts, 0 answers
  1. Randy
    Randy avatar
    73 posts
    Member since:
    Oct 2007

    Posted 21 Mar 2014 Link to this post

    I have two RadDateTimePickers and I want to set the value of one of the pickers equal to the other RadDateTimePicker any time the user changes the date (either by typing or using the calendar popup.   I was looking for an example of how do this but cannot figure it out.

    Here is what I have...

    <tr>
    <td>
    <asp:Label ID="Label2" runat="server" Text="Start Time:"></asp:Label>
    </td>
    <td>
    <telerik:RadDateTimePicker ID="dtStart" runat="server" Width="200px">
    <Calendar>
    <ClientEvents OnDateClick="StartDateClick" />

    </Calendar>
    </telerik:RadDateTimePicker>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Visible="true" ErrorMessage="Start Time is required." Display="Dynamic" Text="*" ControlToValidate="dtStart"></asp:RequiredFieldValidator>
    </td>
    </tr>
    <tr>
    <td>
    <asp:Label ID="Label3" runat="server" Text="End Time:"></asp:Label>
    </td>
    <td>
    <telerik:RadDateTimePicker ID="dtEnd" runat="server" Width="200px"></telerik:RadDateTimePicker>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" Visible="true" ErrorMessage="End Time is required." Display="Dynamic" Text="*" ControlToValidate="dtEnd"></asp:RequiredFieldValidator>
    <asp:CustomValidator ID="cvDateRange" runat="server" Visible="true" Text="*" ErrorMessage="Events cannot span multiple days. Starting and Ending dates must be the same." OnServerValidate="ServerValidation"></asp:CustomValidator>
    </td>
    </tr>

    ​ function StartDateClick(sender, eventArgs) {
                       var day = sender.get_selectedDate();
                       var endDate = $find("<%= dtEnd.ClientID %>");
                        endDate.set_selectedDate(day);
    }
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Mar 2014 in reply to Randy Link to this post

    Hi Randy,

    You can use the OnValueChanged event of the DateInput to achieve your requirement. Take a look at the following code snippet.

    ASPX:
    <telerik:RadDateTimePicker ID="dtStart" runat="server" DateInput-ClientEvents-OnValueChanged="OnValueChanged">
    </telerik:RadDateTimePicker>
    <telerik:RadDateTimePicker ID="dtEnd" runat="server" >
    </telerik:RadDateTimePicker>

    JS:
    <script type="text/javascript">  
     function OnValueChanged(sender, args) {     
        var endDate= $find("<%=dtEnd.ClientID %>");
        endDate.set_selectedDate(args.get_newDate());
      }
    </script>

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top