How to validate 24hour Time Format Using MaskedTextBox in Javascript?

Time input validation is essential for web applications handling scheduling, booking systems, or time tracking functionality. The Syncfusion Javascript MaskedTextBox component provides robust masking capabilities that can be leveraged to implement accurate 24-hour time format validation with dynamic mask adjustment.

Understanding 24-Hour Time Validation Requirements

Implementing proper 24-hour time format validation presents specific challenges that static regex patterns cannot adequately address. The 24-hour format requires precise validation rules:

Hours 00-23: All valid hours in 24-hour format
Minutes 00-59: Valid minutes for any hour
Invalid combinations: Hours beyond 23 or minutes beyond 59

A static mask pattern like [0-2][0-9]:[0-5][0-9] incorrectly allows invalid entries such as “29:59” because it cannot differentiate between valid and invalid hour ranges based on the first digit.

Dynamic Mask Implementation

The most effective solution combines the MaskedTextBox mask property with the change event to dynamically adjust validation rules based on user input. This approach ensures accurate validation by switching mask patterns based on the first digit entered.

Prerequisites

Ensure the Syncfusion MaskedTextBox component is properly installed and imported in your project.

HTML Structure

<input id="timeInput" />

Implementation

import { MaskedTextBox } from '@syncfusion/ej2-inputs';

let timeInput: MaskedTextBox = new MaskedTextBox({
    placeholder: 'Enter time (HH:MM)',
    mask: '[0-2][0-9]:[0-5][0-9]',
    change: (args) => {
        if (args.isInteracted && args.maskedValue) {
            const firstDigit = args.maskedValue.charAt(0);
            
            // Dynamic mask adjustment based on first digit
            if (firstDigit === '0' || firstDigit === '1') {
                // Allow 00-19 hours with any valid minutes
                timeInput.mask = '[0-1][0-9]:[0-5][0-9]';
            } else if (firstDigit === '2') {
                // Restrict to 20-23 hours with valid minutes
                timeInput.mask = '2[0-3]:[0-5][0-9]';
            }
        }
    }
});

timeInput.appendTo('#timeInput');

How the Dynamic Validation Works

The implementation monitors user input through the change event and adjusts the mask pattern based on the first digit:

First digit 0 or 1: Applies mask [0-1][0-9]:[0-5][0-9] allowing hours 00-19
First digit 2: Applies mask 2[0-3]:[0-5][0-9] restricting hours to 20-23
Initial state: Uses [0-2][0-9]:[0-5][0-9] as the starting mask

This approach prevents invalid time entries like “29:45” while maintaining a smooth user experience.

Preview

Key Properties and Events

The implementation utilizes these essential MaskedTextBox properties:

mask: Defines the input pattern and restrictions
placeholder: Provides user guidance for expected format
change: Triggers when input value changes, enabling dynamic mask adjustment
blur: Fires when the component loses focus, ideal for final validation

Use Cases and Applications

This dynamic 24-hour time validation approach is particularly valuable for:

Employee time tracking systems
Appointment scheduling interfaces
Event planning applications
Shift management tools
Meeting room booking systems

The dynamic masking ensures data integrity while providing intuitive user experience across various time input scenarios.

Live Demo

You can explore this implementation in action: StackBlitz Demo

References

Conclusion

This approach ensures accurate 24-hour time input validation while maintaining an excellent user experience. The dynamic mask switching technique can be adapted for other complex input scenarios where static patterns fall short.

I hope you enjoyed learning how to validate 24hour time format using MaskedTextBox in Javascript?.

You can refer to our Javascript Input Mask feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)