Customize datetimepicker display

11 posts, 0 answers
  1. Allen
    Allen avatar
    111 posts
    Member since:
    Apr 2012

    Posted 30 Nov 2012 Link to this post

    Is it possible to change the start time 12:00AM to "Open"  and end time 12:00AM to close on the picker?
  2. Allen
    Allen avatar
    111 posts
    Member since:
    Apr 2012

    Posted 04 Dec 2012 Link to this post

    Can anyone help please?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 05 Dec 2012 Link to this post

    Hi Allen,

    Thank you for contacting us.

    Please try the following approach:
    bool firstTime = true;
    protected void RadDateTimePicker1_ItemDataBound(object sender, Telerik.Web.UI.Calendar.TimePickerEventArgs e)
    {
        if (e.Item is DataListItem)
        {
            DataListItem item = e.Item as DataListItem;
            if (item.Controls[0] is HtmlGenericControl)
            {
                HtmlGenericControl link = item.Controls[0] as HtmlGenericControl;
                if (link.InnerText.Contains("12:00 am"))
                {
                    link.InnerText = firstTime ? "Open" : "Close";
                    firstTime = false;
                }
            }
        }
    }

    I hope this will prove helpful. Please give it a try and let me know about the result.

    Kind regards,
    Eyup
    the Telerik team
    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 their blog feed now.
  5. Allen
    Allen avatar
    111 posts
    Member since:
    Apr 2012

    Posted 05 Dec 2012 Link to this post

    It works great.  However, I also need the selection changed to "OPEN" on the textbox when the open is selected and changed to "Close" when close is selected.  please refere to the PNG.
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Dec 2012 Link to this post

    Hi Allen,

    One suggestion is that you can change the DisplayText of DateInput as follows.

    C#:
    protected void RadTimePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
    {
        if (RadTimePicker1.DateInput.DisplayText == "12:00 AM")
        {
            RadTimePicker1.DateInput.DisplayText = "Open";
        }
        else if (RadTimePicker1.DateInput.DisplayText == "12:00 PM")
        {
            RadTimePicker1.DateInput.DisplayText = "Close";
        }
    }

    Hope this helps.

    Regards,
    Princy.
  7. Allen
    Allen avatar
    111 posts
    Member since:
    Apr 2012

    Posted 06 Dec 2012 Link to this post

    No, this one need to be done on client side.  Otherwise it will reload the page.
    We also need the "12:00 AM" replaced by "Open" and "Close" on the textbox when the modal popup.  Please refer to the PNG.
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Dec 2012 Link to this post

    Hi Allen,

    Try the following JavaScript to achieve your scenario.

    ASPX:
    <DateInput ClientEvents-OnValueChanged="OnValueChanged">

    JS:
    <script type="text/javascript">
        function OnValueChanged(sender, args) {
            if(args.get_newValue() == "12:00 AM")
            {
                sender.set_displayValue("Open");
            }
            else if(args.get_newValue() == "12:00 PM")
            {
                sender.set_displayValue("Close");
            }
        }
    </script>

    Hope this helps.

    Regards,
    Princy.
  9. Allen
    Allen avatar
    111 posts
    Member since:
    Apr 2012

    Posted 07 Dec 2012 Link to this post

    This is onValueChanged.  I also want it changed to "Open" when the modal popup if the time is 12:00AM, same thing for "Close".
  10. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 07 Dec 2012 Link to this post

    Hi Allen,

    Please try adding the OnLoad event
    <telerik:RadTimePicker ID="RadTimePicker1" runat="server">
        <DateInput runat="server">
            <ClientEvents OnValueChanged="changeInputValue" OnLoad="changeInputValue" />
        </DateInput>
    </telerik:RadTimePicker>
    JavaScript:
    function changeInputValue(sender, args) {
        if (sender.get_value() == "12:00 AM") {
            sender.set_displayValue("Open");
        }
        else if (sender.get_value() == "12:00 PM") {
            sender.set_displayValue("Close");
        }
    }

    Looking forward to your reply when ready.

    Regards,
    Eyup
    the Telerik team
    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 their blog feed now.
  11. Allen
    Allen avatar
    111 posts
    Member since:
    Apr 2012

    Posted 07 Dec 2012 Link to this post

    I got an error: Microsoft JScript runtime error: Object doesn't support property or method 'set_displayValue'.
    I'm using dateTimePicker, not TimePicker.   "sender.set_displayValue("Open"); will not work.
    So, I have modified the function as follow, it did change the "sender._enteredText" to "12/24/2012 Open", but it did'nt show on the display: please refer to the PNG

    function

     

     

    changeInputValue(sender, args) {

     

     

     

    if (sender.get_value().endsWith("12:00 AM") == true) {

     

     

     

    var str3 = sender._savedEditValue;

     

     

     

    var str4 = str3.replace("12:00 AM", "Open");

     

    sender.set_value(str4);

    }

    }

  12. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2012 Link to this post

    Hi Allen,

    I couldn't replicate the issue that you are facing at my end. Please make sure that you are using the latest version of telerik controls. Please try the following code snippet in case of the RadDateTimePicker.

    JS:
    <script type="text/javascript">
        function changeInputValue(sender, args) {
            if (sender.get_value().endsWith("12:00 AM") == true) {
                var str3 = sender.get_displayValue();
                var str4 = str3.replace("12:00 AM", "Open");
                sender.set_displayValue(str4);
            }
            else if (sender.get_value().endsWith("12:00 PM") == true) {
                var str3 = sender.get_displayValue();
                var str4 = str3.replace("12:00 PM", "Close");
                sender.set_displayValue(str4);
            }
        }
    </script>

    Hope this helps.

    Regards,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017