RadTimePicker Allows Characters

[Angelo Babudro]

Why does the RadTimePicker allow you to enter characters (i.e. abcd) and then validate with a red border saying that its an invalid entry? Is there a way to not allow the user to type alpha characters at all? Only numeric characters? Seems like a pretty simple mask to me...

Thanks

[Daniel]

Hello Angelo,

It is possible to implement a similar functionality using the following code:

<script type="text/javascript" language="javascript">
    function KeyPress(sender, eventArgs)
    {
        if (eventArgs.get_keyCode() < 48 || eventArgs.get_keyCode() > 58)
            eventArgs.set_cancel(true);
    }
</script>

<telerik:RadTimePicker ID="RadTimePicker1" runat="server">
    <DateInput ClientEvents-OnKeyPress="KeyPress" runat="server">
    </DateInput>
</telerik:RadTimePicker>

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Angelo Babudro]

daniel:

This won;t quite work becuase the user has to be able to enter for example 2:45 AM or 4:13 PM...

[Daniel]

Hello Angelo,

Currently our RadTimePicker control doesn't support the desired functionality.

As I mentioned before you can implement the mask-like behavior on your own. For your convenience I present you some sample code-snippets (nevertheless I suppose you already know how to do this):

common methods:

function IsDigit(dchar)
{
    return (dchar > 47 && dchar < 58);
}

approach 1:

function ValidateTimeCharacter(sender, value, key, keycode)
{
    var len = value.length;
    if (len == 1 && keycode == 58)
        sender.set_textBoxValue("0" + value + ":");
    if (len == 2 && keycode != 58 && IsDigit(keycode))  {
        sender.set_textBoxValue(value + ":");
        len++;  }
    if (len == 5 && keycode == 32)
        return true;
    if (len == 6)  {
        if (key.toUpperCase() == "A" || key.toUpperCase() == "P")
            sender.set_textBoxValue(value + key.toUpperCase() + "M");
        return false;  }
    if (len > 6 || (!IsDigit(keycode) && !(len == 2 && keycode == 58)) || len == 5 || (len == 3 && key > 5) || (len == 1 && value + key > 12))
        return false;
    return true;
}

check 1:

function KeyPress(sender, eventArgs)
{
    if (!ValidateTimeCharacter(sender, sender.get_textBoxValue(), eventArgs.get_keyCharacter(), eventArgs.get_keyCode()))
        eventArgs.set_cancel(true);
}

approach 2:

function ValidateMaskChar(mask, sender, args)
{
    var pos = sender.get_textBoxValue().length;
    var key = args.get_keyCharacter();
    var keycode = args.get_keyCode();
    switch (mask.charAt(pos))
    {
        case "i":
        case "o": return ((IsDigit(keycode) && sender.get_textBoxValue().charAt(0) == "0") || keycode < 51);
        case "h": return (keycode == 48 || keycode == 49);
        case ":": return keycode == 58;
        case "m": return (IsDigit(keycode) && keycode < 54);
        case " ": return keycode == 32;
        case "t": return (key.toUpperCase() == "P" || key.toUpperCase() == "A");
        case "f": return key.toUpperCase() == "M";
    }
}

check 2:

function KeyPress(sender, eventArgs)
{
    var mask = "ho:mi tf";
    if (!ValidateMaskChar(mask, sender, eventArgs))
        eventArgs.set_cancel(true);
}

Please notice that this is a sample code - it's neither optimized nor tested completely. You need to modify it further in order to be useful in a real project.

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Amjad Hussain]

This code is not working keypress event is not call


 <script type="text/javascript" language="javascript">
   function IsDigit(dchar)
{
    return (dchar > 47 && dchar < 58);
}
function ValidateTimeCharacter(sender, value, key, keycode)
{
    var len = value.length;
    if (len == 1 && keycode == 58)
        sender.set_textBoxValue("0" + value + ":");
    if (len == 2 && keycode != 58 && IsDigit(keycode))  {
        sender.set_textBoxValue(value + ":");
        len++;  }
    if (len == 5 && keycode == 32)
        return true;
    if (len == 6)  {
        if (key.toUpperCase() == "A" || key.toUpperCase() == "P")
            sender.set_textBoxValue(value + key.toUpperCase() + "M");
        return false;  }
    if (len > 6 || (!IsDigit(keycode) && !(len == 2 && keycode == 58)) || len == 5 || (len == 3 && key > 5) || (len == 1 && value + key > 12))
        return false;
    return true;
}
//function KeyPress(sender, eventArgs)
//{
//    if (!ValidateTimeCharacter(sender, sender.get_textBoxValue(), eventArgs.get_keyCharacter(), eventArgs.get_keyCode()))
//        eventArgs.set_cancel(true);
//}
function KeyPress(sender, eventArgs)
{
    var mask = "ho:mi tf";
    if (!ValidateMaskChar(mask, sender, eventArgs))
        eventArgs.set_cancel(true);
}
function ValidateMaskChar(mask, sender, args)
{
    var pos = sender.get_textBoxValue().length;
    var key = args.get_keyCharacter();
    var keycode = args.get_keyCode();
    switch (mask.charAt(pos))
    {
        case "i":
        case "o": return ((IsDigit(keycode) && sender.get_textBoxValue().charAt(0) == "0") || keycode < 51);
        case "h": return (keycode == 48 || keycode == 49);
        case ":": return keycode == 58;
        case "m": return (IsDigit(keycode) && keycode < 54);
        case " ": return keycode == 32;
        case "t": return (key.toUpperCase() == "P" || key.toUpperCase() == "A");
        case "f": return key.toUpperCase() == "M";
    }
}
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    </telerik:RadScriptManager>
    <telerik:RadTimePicker ID="Time" runat="server">
    <DateInput ClientEvents-OnKeyPress="KeyPress" runat="server">
    </DateInput>
          

  </telerik:RadTimePicker>
    </form>
    
</body>

[Daniel]

Hello Amjad,

Please examine the attached demo and let me know whether it's working as expected at your side.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.