displaying-the-popup.md

title	page_title	description	slug	tags	published	position
Displaying the Popup	Displaying the Popup - RadDateTimePicker	Check our Web Forms article about Displaying the Popup.	datetimepicker/functionality/displaying-the-popup	displaying,the,popup	true	3

Displaying the Popup

By default the RadDateTimePicker control displays buttons to the right of the input area. When the user clicks on a button, the embedded RadCalendar or RadTimeView control pops up to aid in selecting a value. This behavior happens automatically, without the need of any programming.

You can alter this behavior by hiding the DatePopupButton or TimePopupButton on the RadDateTimePicker control, and displaying the popup control using client-side code. The client-side showPopup() method displays the popup calendar control, while the client-side showTimePopup() method displays the popup time view control.

The following example illustrates how to hide the popup buttons and use client-side code to display the popup. The RadDatePicker control displays its popup when the input area gets focus. The RadTimePicker control displays its popup when the user clicks in the input area. The RadDateTimePicker control displays its popup in response to a user key press.

<telerik:RadDateTimePicker RenderMode="Lightweight" ID="RadDateTimePicker1" runat="server">
    <DateInput>
        <ClientEvents OnKeyPress="ShowDateTimePopup" />
    </DateInput>
    <DatePopupButton Visible="False" />
    <Calendar DayNameFormat="FirstLetter" FirstDayOfWeek="Default"
        UseColumnHeadersAsSelectors="False"
        UseRowHeadersAsSelectors="False">
    </Calendar>
    <TimePopupButton Visible="False" />
</telerik:RadDateTimePicker>	

function ShowDateTimePopup(sender, eventArgs) {
    var picker = $find("<%= RadDateTimePicker1.ClientID %>");
    var userChar = eventArgs.get_keyCharacter();
    if (userChar == '@') {
        picker.showPopup();
        eventArgs.set_cancel(true);
    }
    else if (userChar == '#') {
        picker.showTimePopup();
        eventArgs.set_cancel(true);
    }
}

Note that the embedded DatePopupButton and TimePopupButton controls have their Visible property set to False. This hides the buttons that appear by default.