Link RadTimePicker together from client-side

3 posts, 0 answers
  1. Guillaume
    Guillaume avatar
    4 posts
    Member since:
    Mar 2014

    Posted 17 Mar 2015 Link to this post

    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
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 20 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Guillaume
    Guillaume avatar
    4 posts
    Member since:
    Mar 2014

    Posted 20 Mar 2015 in reply to Viktor Tachev Link to this post

    Thx alot i really like the idea.
Back to Top