Validating time entry in numeric text box

[Megatron]

I am using Numeric Text Box inside the SF Grid with 7 cols, where most of the cells have a text box.

How can I validate and force user to only enter VALID time in SF Grid Cell below in12 hrs format & 24 hrs.

Range & accept comma or decimal point

1. 00.00 to 23.59 
2. 00,00 to 23,59
3. If no decimal is entered by user automatically pad 2 zeros
4. Round to the nearest full number if decimal option is disabled (0 decimals allowed)
   

Options:

How to set these options

1. Allow 15 min increments or 30 mins increment.
2. Round to 2 decimal places
3. Round to 0 decimal places
4. 12 hrs format & 24 hrs

Summary Row & Summary Col:

how can I show the summary totals for each col to showup in BOTH the last summary col & summary row  for numeric only values.

thanks

[Ashokkumar Balasubramanian]

Hi Megatron, 

 

We have analyzed your requirements. In our Syncfusion controls, already we have the TimePicker components, it’s not necessary to go for Numeric Textbox. So we  suggest you to achieve those requirements using TimePicker component.    

 

Documentation: https://help.syncfusion.com/aspnetmvc/timepicker/getting-started 

 

Online demo samples: http://mvc.syncfusion.com/demos/web/timepicker/default 

 

Please let us know, if the provided information’s are helpful to achieve your requirements or not. 

 

Regards, 

Ashokkumar B. 

[Megatron]

Hello please read my question again - .

I was NOT asking about picking/selecting a specific time - I was asking about data entry of hours - entering the Quantity of time

For e.g. not 3:00 AM or 2:00 AM, rather user wants to enter 30 mins or 45 mins, or 3 hours and 25 mins... in the formats as I previously listed.

thanks

[Ashokkumar Balasubramanian]

Hi Megatron, 

 

We have looked with your requirement to enter the time value in a numeric textbox that increments time value by 15 minutes or 30 minutes, but unfortunately, we are unable to customize the value as like less than 60 minutes. We have achieved your requirement by customizing our time picker control with spin buttons that allows to increment or decrement values by clicking them. We have customized our time picker component using client side Create event to add the spin buttons and update the time values on clicking them as shown in the below code snippet. 

[cshtml] 

 

@Html.EJ().TimePicker("TimePick").ClientSideEvents(e=>e.Create("onCreate")).TimeFormat("H.mm").MinutesInterval(30).CssClass("e-numeric").ShowPopupButton(false) 

 

function onCreate(args) 

    { 

        obj = this; 

        //Creating elements to add spin buttons 

        var spanEle = ej.buildTag("span .e-select"); 

        this.wrapper.find(".e-in-wrap").append(spanEle); 

        //increment spin button 

        var upIcon = ej.buildTag("span .e-spin e-spin-up ").attr("role", "button"); 

        upIcon.append(ej.buildTag("span .e-icon e-arrow e-arrow-sans-up").attr("role", "presentation")); 

        //decrement spin button 

        var downIcon = ej.buildTag("span .e-spin e-spin-down ").attr("role", "button"); 

        downIcon.append(ej.buildTag("span .e-icon e-arrow e-arrow-sans-down").attr("role", "presentation")) 

        spanEle.append(upIcon);//appending spin buttons within time picker textbox. 

        spanEle.append(downIcon); 

        $(".e-spin.e-spin-down").click(function () { 

            obj._modifyValue(false); // decrement the time value on click. 

        }); 

        $(".e-spin.e-spin-up").click(function () { 

            obj._modifyValue(true); // increments the time value on click. 

        }); 

    } 

 

For your convenience, we have created a sample as per your requirement and attached in the below link. Please check it. 

 

Sample    

Regards, 

Ashokkumar B.