This is a migrated thread and some comments may be shown as answers.

Customize datetimepicker display

10 Answers 101 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Allen
Top achievements
Rank 1
Allen asked on 30 Nov 2012, 08:32 PM
Is it possible to change the start time 12:00AM to "Open"  and end time 12:00AM to close on the picker?

10 Answers, 1 is accepted

Sort by
0
Allen
Top achievements
Rank 1
answered on 04 Dec 2012, 02:54 PM
Can anyone help please?
0
Eyup
Telerik team
answered on 05 Dec 2012, 12:43 PM
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.
0
Allen
Top achievements
Rank 1
answered on 05 Dec 2012, 11:25 PM
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.
0
Princy
Top achievements
Rank 2
answered on 06 Dec 2012, 06:46 AM
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.
0
Allen
Top achievements
Rank 1
answered on 06 Dec 2012, 07:42 PM
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.
0
Princy
Top achievements
Rank 2
answered on 07 Dec 2012, 04:40 AM
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.
0
Allen
Top achievements
Rank 1
answered on 07 Dec 2012, 06:15 AM
This is onValueChanged.  I also want it changed to "Open" when the modal popup if the time is 12:00AM, same thing for "Close".
0
Eyup
Telerik team
answered on 07 Dec 2012, 08:44 AM
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.
0
Allen
Top achievements
Rank 1
answered on 07 Dec 2012, 04:39 PM
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);

}

}

0
Princy
Top achievements
Rank 2
answered on 10 Dec 2012, 07:16 AM
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.
Tags
Calendar
Asked by
Allen
Top achievements
Rank 1
Answers by
Allen
Top achievements
Rank 1
Eyup
Telerik team
Princy
Top achievements
Rank 2
Share this question
or