Disable manual input and only allow pop-up selection?

[Michael Malone]

How can I disable the user from manually entering values with the keyboard? Selections should only come from the pop-up values. I tried setting the DateInput.ReadOnly to True but that disabled the popup as well. 

[Michael Malone]

Any ideas? Thanks.

[Viktor Tachev]

Hello Michael,

Setting the ReadOnly property of the DateInput should not disable the popup. If the popup is not opening it could be due to a JavaScript error. Would you open the browser console and see if there are any errors listed?

With this said, the following code should not allow the user to enter custom text in the DateInput of a RadTimePicker control.

<telerik:RadTimePicker runat="server" ID="RadTimePicker1">
    <DateInput ReadOnly="true"></DateInput>
</telerik:RadTimePicker>

Regards,
Viktor Tachev
Telerik

[Michael Malone]

 

If I set DateInput.ReadOnly = true then I can only get the popup  to work if the TimePopupButton.Visible property is set to true. If I set it to false, the ShowPopupOnFocus stops working. I need the TimePopupButton hidden and ShowPopupOnFocus to still render the popup.

 

this.ShowPopupOnFocus = true;
this.TimePopupButton.Visible = false;
this.Width = Unit.Pixel(55);
this.DateInput.ReadOnly = true;

[Viktor Tachev]

Hello Michael,

When ShowPopupOnFocus is set to true the popup is shown when the DateInput is focused. However, if it is ReadOnly the user cannot enter values in the input and cannot also focus it.

In order to implement the behavior you are looking for you can use the following approach:

Markup:

<telerik:RadTimePicker runat="server" ID="RadTimePicker1" TimePopupButton-Visible="false" ShowPopupOnFocus="true" >
    <DateInput ClientEvents-OnKeyPress="keyPress" ></DateInput>
</telerik:RadTimePicker>

JavaScript:

function keyPress(sender, args) {
    args.set_cancel(true);
}

With this setup the user will still not be able to enter custom values in the DateInput.


Regards,
Viktor Tachev
Telerik