Link RadTimePicker together from client-side

[Guillaume]

Hi,

I've been trying to link to RadTimePicker together, so when i change the time of one of them the time is adjust properly. I only have a problem and i don't know if its possible to do something about it.

When i change the time to of the first time picker, the result is the time selected should be on the next day.

eg. I select 23h30 on today and the result i want is 00h00 on the next day.

I does change the time on the second RadTimePicker, but it always stays as today.

My question is, is there a way to change the date to the RadTimePicker? I know that there's a RadDateTimePicker but i can't use this control on the page i have right now.

Thx for your help,

Guillaume

[Viktor Tachev]

Hello Guillaume,

By default the RadTimePicker control is used only for selecting time, it does not use the date part of a Date object. Because of this even if you set the date for the control explicitly it is disregarded.

If you would like to use time picker that considers the date you can use RadDateTimePicker control and customize it a bit. You can hide the calendar popup button and set custom DateFormat. This way the user will be able to select only time from the popup.

The following code snippets illustrate how you can implement the functionality.

<telerik:RadDateTimePicker runat="server" ID="RadDateTimePicker1" ClientEvents-OnDateSelected="dateSelected" DatePopupButton-Visible="false" DateInput-DateFormat="HH:mm"></telerik:RadDateTimePicker>
<telerik:RadDateTimePicker runat="server" ID="RadDateTimePicker2" DatePopupButton-Visible="false" DateInput-DateFormat="HH:mm"></telerik:RadDateTimePicker>

JavaScript:

<telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
    <script type="text/javascript">
        function dateSelected(sender, args) {
            var firstPicker = sender;
            var secondPicker = $find("<% = RadDateTimePicker2.ClientID %>");

            var firstDate = firstPicker.get_selectedDate();
            var firstHour = firstPicker.get_selectedDate().getHours();

            var secondDate = new Date(firstPicker.get_selectedDate());
            secondDate.setHours(secondDate.getHours() + 2);

            secondPicker.set_selectedDate(secondDate);

        }
    </script>

</telerik:RadScriptBlock>

Regards,
Viktor Tachev
Telerik

 

 

[Guillaume]

Thx alot i really like the idea.