I'm using an ASP.Net RadDateTimePicker (2013.2.717.35) and trying to set the displayDateFormat as the user is selecting a new date or time. If the time is 00:00:00 (midnight) then I want to display only the date. Once the user selects a time other than 00:00:00, then I want to show the date and time. I'm trying to set this format in a JavaScript function that is wired up to the ClientEvents.OnDateSelected event.
The issue I'm having is that the formatting of the date/time value isn't applied to the date/time the user just selected. It gets applied to the next date/time the user selects. For example, when the user clicks on the calendar icon and selects an initial date, the value is, for example, "08/06/2013 12:00AM". The ClientEvents.OnDateSelected fires, I see that the time selected is midnight so I execute the following JavaScript to hide the time portion:
After the OnDateSelected event finishes, the "12:00 AM" is still visible. If the user then clicks on the clock icon and chooses a time other than midnight, then the following JavaScript line is executed in the OnDateSelected event:
At that point, the user sees the formatting selection from the previous event firing, which is "08/06/2013".
How can I correctly intercept the date/time the user selected and apply the proper formatting immediately?
Here is a sample page that I'm working with:
The issue I'm having is that the formatting of the date/time value isn't applied to the date/time the user just selected. It gets applied to the next date/time the user selects. For example, when the user clicks on the calendar icon and selects an initial date, the value is, for example, "08/06/2013 12:00AM". The ClientEvents.OnDateSelected fires, I see that the time selected is midnight so I execute the following JavaScript to hide the time portion:
sender.get_dateInput().set_displayDateFormat("MM/dd/yyyy");After the OnDateSelected event finishes, the "12:00 AM" is still visible. If the user then clicks on the clock icon and chooses a time other than midnight, then the following JavaScript line is executed in the OnDateSelected event:
sender.get_dateInput().set_displayDateFormat("M/d/yyyy h:mm tt");At that point, the user sees the formatting selection from the previous event firing, which is "08/06/2013".
How can I correctly intercept the date/time the user selected and apply the proper formatting immediately?
Here is a sample page that I'm working with:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script type="text/javascript" language="javascript"> function g(sender, eventArgs){ if ((eventArgs._newValue.indexOf("12:00 AM") > 0) || (eventArgs._newValue.indexOf("AM") < 0 && eventArgs._newValue.indexOf("PM") < 0)) { //Set date format to date only sender.get_dateInput().set_dateFormat("M/d/yyyy h:mm tt"); sender.get_dateInput().set_displayDateFormat("MM/dd/yyyy"); } else { //Set date format to include time sender.get_dateInput().set_dateFormat("M/d/yyyy h:mm tt"); sender.get_dateInput().set_displayDateFormat("M/d/yyyy h:mm tt"); } } </script></head><body> <form id="form1" runat="server"> <div> <telerik:RadScriptManager ID="rsm" runat="server"></telerik:RadScriptManager> <telerik:RadDateTimePicker ID="cal" runat="server" ClientEvents-OnDateSelected="g"></telerik:RadDateTimePicker> </div> </form></body></html>3 Answers, 1 is accepted
0
Hi James,
You can call sender.get_dateInput().updateDisplayValue(); to force the input to redisplay the value according to the new format set.
Regards,
Vasil
Telerik
You can call sender.get_dateInput().updateDisplayValue(); to force the input to redisplay the value according to the new format set.
Regards,
Vasil
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
James
Top achievements
Rank 1
Rank 1
answered on 09 Aug 2013, 12:40 PM
Hi Vasil,
Thank you for your response. I'm afraid the call to updateDisplayValue() had no effect. I've updated my JavaScript to the following:
Thinking I wasn't calling it correctly, I tried searching for it in your online documentation and couldn't find any references to it. Is there anything else I can try?
Thank you,
James
Thank you for your response. I'm afraid the call to updateDisplayValue() had no effect. I've updated my JavaScript to the following:
function g(sender, eventArgs) { if ((eventArgs._newValue.indexOf("12:00 AM") > 0) || (eventArgs._newValue.indexOf("AM") < 0 && eventArgs._newValue.indexOf("PM") < 0)) { //Set date format to date only sender.get_dateInput().set_dateFormat("M/d/yyyy h:mm tt"); sender.get_dateInput().set_displayDateFormat("MM/dd/yyyy"); } else { //Set date format to include time sender.get_dateInput().set_dateFormat("M/d/yyyy h:mm tt"); sender.get_dateInput().set_displayDateFormat("M/d/yyyy h:mm tt"); } sender.get_dateInput().updateDisplayValue();}Thinking I wasn't calling it correctly, I tried searching for it in your online documentation and couldn't find any references to it. Is there anything else I can try?
Thank you,
James
1
Hello James,
This code should work for your, to show the time part when it is different than 12:00 AM.
Regards,
Vasil
Telerik
This code should work for your, to show the time part when it is different than 12:00 AM.
function g(sender, eventArgs){ var dateInput = sender.get_dateInput(); if ((eventArgs._newValue.indexOf("12:00 AM") > 0) || (eventArgs._newValue.indexOf("AM") < 0 && eventArgs._newValue.indexOf("PM") < 0)) { //Set date format to date only dateInput.set_dateFormat("M/d/yyyy h:mm tt"); dateInput.set_displayDateFormat("MM/dd/yyyy"); } else { //Set date format to include time dateInput.set_dateFormat("M/d/yyyy h:mm tt"); dateInput.set_displayDateFormat("M/d/yyyy h:mm tt"); } dateInput.set_displayValue(dateInput._constructDisplayText(dateInput._value));}Regards,
Vasil
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.