Get DateTime from RadDatePicker and RadTimePicker

[Jiju]

Hi,
how to get the datetime value using javascript by combining the values of RadDatePicker and RadTimePicker

thanks in advance
Jiju

[Princy]

Hi,

Try the following javascript.
JS:

function OnClientClick()
   {
       var datePicker = $find("<%=RadDatePicker1.ClientID %>");
       var timepicker = $find("<%=RadTimePicker1.ClientID %>");
       var dt = datePicker.get_dateInput().get_selectedDate().format("yyyy/MM/dd");
       var time = timepicker.get_dateInput().get_value();
       alert(dt +" "+ time);
   }

Thanks,
Princy.

[Jiju]

hi, 
how can i get the datetime to a variable ?
I tried the below code but not working.

var selectedDate = new Date(datePicker.get_dateInput().get_selectedDate() + " " + timepicker.get_dateInput().get_value());
it returns null value.

thanks in advance

regards
Jiju

[Shinu]

Hi Jiju,

Please have a look at the following code I tried which works fine at my end.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
</telerik:RadDatePicker>
<telerik:RadTimePicker ID="RadTimePicker1" runat="server">
</telerik:RadTimePicker>
<br />
<br />
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Get Date and Time" OnClientClicked="OnClientClicked">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function OnClientClicked(sender, args) {
        var datePicker = $find("<%=RadDatePicker1.ClientID %>");
        var timepicker = $find("<%=RadTimePicker1.ClientID %>");
        var selectedDate = datePicker.get_selectedDate().format("yyyy/MM/dd");
        var selectedTime = timepicker.get_selectedDate().format("HH:mm:ss")
        alert(selectedDate + " " + selectedTime);
    }
</script>

Thanks,
Shinu.

[Mayur]

Thanks Princy,
                        Your blog really helped me to resolve a big issue in my project. I would be always thankful to you.

[Liviu]

Hello Princy,
I see that everywhere is used $find("<%=RadTimePicker1.ClientID %>"); to get a reference to the timePicker object. This works fine if the timePicker control is a static element added to the asp page.
But, what if the timePicker control is a column from a grid(table), and is bound to a list, so it will be generated dynamically, according to the datasource. 
e.g:

<asp:TemplateField HeaderText="End time">
    <ItemTemplate>
 <telerik:RadTimePicker ID="timePickToHour" runat="server"  SelectedDate  ='<%# Bind("ToHour") %>' Width="70px"></telerik:RadTimePicker> 
      </ItemTemplate>
</asp:TemplateField>


 
In this case, doesn't seem to work $find("<%=timePickToHour.ClientID %>") because I get the following error:
"The name 'timePickToHour' does not exist in the current context."
What I need to achieve is to get the value of two RadTimePicker from the same table row and to calculate the difference between them.
Can you help me with this please?

[Eyup]

Hi Liviu,

Once you have the grid row container, you can use the findControl and findElement methods to achieve this requirement. I am also sending a sample RadGrid web site to demonstrate a similar implementation. Please run the attached application and let me know if it helps you.

Regards,
Eyup
Telerik

 

 

[Liviu]

Hi Eyup,

I did a quick check in console and seems to work, nice!
If I will encounter any problem after I'll modify my .js I will let you know, but I don't think it will be.
Thank you very much!

[Alfonso]

FechaEntrevista = Convert.ToDateTime(this.rddtpckfechaentrvst.SelectedDate + this.rdtmpckhoraentrvst.SelectedTime);

[Eyup]

Hi Alfonso,

I guess you replied to the initial query of getting the combined value of the picker controls. This is also an option if the developer prefers server-side approach. The pickers provide AutoPostback property which will automatically cause a postback to the server when a value is selected. And for final optimization, RadAjaxManager or RadAjaxPanel may be used to achieve smooth user experience.

Regards,
Eyup
Telerik