RadDateTimePicker OnDateSelected setting displayDateFormat

4 posts, 0 answers
  1. James
    James avatar
    16 posts
    Member since:
    Dec 2011

    Posted 06 Aug 2013 Link to this post

    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:
    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">
     
    <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>
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 09 Aug 2013 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James
    James avatar
    16 posts
    Member since:
    Dec 2011

    Posted 09 Aug 2013 Link to this post

    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:

    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
  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 14 Aug 2013 Link to this post

    Hello James,

    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.
Back to Top