Alarm-Clock style input?

[Tim]

I'd like to have an "alarm clock" style input.  I don't like the RadTimePicker all that much.   Basically if the RadNumericInput ShowSpinControls=true allowed me to say 00..09, 10, 11..59 I would be completely happy.

Anyone know how to get the RadNumericInput to have leading 0s for < 10?

Alternatively, the asp:listbox is what I need (00:00, 00:30, ... 23:30) which looks like a spinner, but the Telerik list control doesn't do that either, as I recall.

Thanks,
Tim

[Dimo]

Hi Tim,

RadNumericTextBox cannot have leading zeros for one-digit numbers, but you can try using RadMaskedTextBox for the scenario you are after.

Best wishes,
Dimo
the Telerik team

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

[Tim]

RadMaskedTextBox hasn't got a ShowSpinControl property.  I want the alarm-clock like feature of holding down the spinner and having the time advance.  And I'd like to use our custom Telerik skins so that it looks like everything else, unlike the asp:listbox which doesn't look like everything else.

Tim

[Dimo]

Hi Tim,

Well, in this case the closest thing to an alarm-clock would be to have two RadNumericTextBoxes - one for the hours and one for the minutes. The spin buttons will increment and decrement the values, according to the user's preference. I have prepared an example, in which if the maximum value is reached (23 or 59), the value changes to zero, which creates a "rotation" effect.

You can implement a similar scenario with only one pair of spin buttons for the minutes textbox. If the minutes reach 59 and the user clicks on "up", the hour value can be incremented as well.


ASPX

<telerik:RadNumericTextBox
    ID="Hours"
    runat="server"
    Width="40px"
    ShowSpinButtons="true"
    NumberFormat-DecimalDigits="0"
    ClientEvents-OnValueChanging="OnValueChanging" />

 :

<telerik:RadNumericTextBox
    ID="Minutes"
    runat="server"
    Width="40px"
    ShowSpinButtons="true"
    NumberFormat-DecimalDigits="0"
    ClientEvents-OnValueChanging="OnValueChanging" />

Javascript

function OnValueChanging(sender, args)
{
    var currentMin = 0;

    if (sender.get_id() == "Hours")
    {
        var currentMax = 23;
    }
    else
    {
        var currentMax = 59;
    }

    if (args.get_newValue() > currentMax)
    {
        args.set_cancel(true);
        sender.set_value(currentMin);
    }
    if (args.get_newValue() < currentMin)
    {
        args.set_cancel(true);
        sender.set_value(currentMax);
    }
}

Sincerely yours,
Dimo
the Telerik team

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

[Tim]

Maybe.  How about a single control, with spinners, decimaldigits=2 and the separator set to ":" -- then with the Javascript we could manage:

1.00 -> 1:00
11.00 -> 11:00
11.05 -> 11:05
11.1 -> 11:10
11.59 -> 11:59
11.60 oops change to 12.00 -> 12:00

That might do the trick.  Also, my alarm clock only needs 30-minute (15 worst case) increments...

Tim

[Dimo]

Hello Tim,

This can be accomplished with RadMaskedTextBox. It does not have native spin buttons, however, you can add separate custom buttons, which will modify the textbox' value on every click. Of course, the custom buttons can easily be made to look like real spin buttons with CSS. You can also make the textbox readonly, if you don't want to allow manual entering of data. Alternatively, you have to validate the user input.

Let us know if you need more information.


Greetings,
Dimo
the Telerik team

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

[Luai]

I have been trying to make one RadNumericTextBox with spinner work with time.

Problem I ran in to was that the set_value() method won't accept either my decimal or string inputs as shown below. It keeps giving me stack overflow error.

It seems it is only happy with int values, which won't be helpful in this case.
Here is my code.............

Also just for future reference, is there a library where I can check for your homegrown javascript methods, like set_value, ... etc.

<script type="text/javascript" language="javascript">
function OnValueChanging(sender, args) {
var val = args.get_newValue();
var str = String(val);
var index = str.indexOf(".");
var Hstr;
var Mstr;
var allowedTime;

if(index == 1)
{
Hstr = str.substring(0,1);
Hstr = parseFloat(Hstr);
Mstr = str.substring(1,4);
Mstr = parseFloat(Mstr);
Mstr = compare(Mstr);
allowedTime = Hstr + Mstr;
//alert(allowedTime);
args.set_cancel(true);
sender.set_value(allowedTime);
}

else if (index == 2)
{
Hstr = str.substring(0,2);
Hstr = parseFloat(Hstr);
Mstr = str.substring(2,5);
Mstr = parseFloat(Mstr);
Mstr = compare(Mstr);
allowedTime = Hstr + Mstr;
//alert(allowedTime);
args.set_cancel(true);
sender.set_value(allowedTime);
}

else
alert("Index is : " + index);
return;

}


function compare(d)
{
if((d > .0) && (d < .1)){d = .00;}
else if((d > .1) && (d <= .15)){d = .15;}
else if((d > .15) && (d <= .3)){d = .30;}
else if((d > .3) && (d <= .45)){d = .45;}
else if(d > .45){d = .60;}
else
d = d;
return d;
}

</script>

<telerik:RadNumericTextBox ID="RadNumericTextBoxWD_ST_H" runat="server"
CausesValidation="True" Culture="English (United States)" Enabled="False"
Label="Start Time" MaxLength="5" MaxValue="23.59" MinValue="0" ShowSpinButtons="True" Skin="Web20"> <IncrementSettings Step="0.15" /> <ClientEvents OnValueChanging="OnValueChanging" /> <NumberFormat DecimalDigits="2" DecimalSeparator=":" GroupSeparator=":" GroupSizes="2" NegativePattern="n" /> </telerik:RadNumericTextBox>

[Dimo]

Hi luay,

I made a mistake in my previous post and the javascript code was misleading. Sorry about that.

The following is not a correct way to overrride a value and set another one, because in some cases it may lead to an endless cycle (as in your case), because OnValueChanging is fired continuously:

args.set_cancel(true);
sender.set_value(...);


The correct way is:

args.set_newValue(...)


Greetings,
Dimo
the Telerik team

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