Alarm-Clock style input?

8 posts, 0 answers
  1. Tim
    Tim avatar
    169 posts
    Member since:
    Apr 2008

    Posted 12 Aug 2008 Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 12 Aug 2008 Link to this post

    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.
  3. Tim
    Tim avatar
    169 posts
    Member since:
    Apr 2008

    Posted 12 Aug 2008 Link to this post

    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

  4. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 12 Aug 2008 Link to this post

    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.
  5. Tim
    Tim avatar
    169 posts
    Member since:
    Apr 2008

    Posted 12 Aug 2008 Link to this post

    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

  6. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 12 Aug 2008 Link to this post

    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.
  7. Luai
    Luai avatar
    4 posts
    Member since:
    Aug 2008

    Posted 12 Aug 2008 Link to this post

    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>

  8. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 15 Aug 2008 Link to this post

    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.
Back to Top