Implementing Time Validation and Dynamic Placeholders with x-mask

[fabiomlferreira]

I am working with the x-mask directive to create an input field for time entries formatted as "HH:MM:SS". However, I've encountered an issue where the user can enter invalid time values such as "00:00:90", which doesn't represent a valid time.

For example, when using x-mask="99:99:99", there's no validation that restricts the hours to a maximum of 24 and the minutes/seconds to 59. Is there a way to implement these constraints directly within Alpine.js using x-mask or another Alpine.js functionality?

Additionally, I have a requirement where the input field should always show placeholders as the user types. For instance, before any input, it should display "::". As the user types, it should update dynamically, like "00:5_:" and so on, until a full valid time like "00:55:23" is entered.

Could you provide guidance or suggestions on how to achieve these behaviors?

[mynona]

I am also curious about this one. Maybe it can even be a feature request to have it the same way as the money directive.

[ekwoka]

You can make your own pretty simply.

something like

{
    time(input) {
        const [hours, minutes, seconds] = input.split(':')
        let mask = ''
        if (hours && Number(hours) < 24) mask += hours 
        else mask += '9'
        if (hours.length === 2 || minutes) mask += ':'
        if (minutes && Number(minutes) < 60) mask += minutes
        else mask += '9'
        if (minutes.length === 2 || seconds) mask += ':'
        if (seconds && Number(seconds) < 60) mask += seconds
        else seconds += '9'
        return mask
    }
}

<input type="text" x-mask.dynamic="time">

Or something.

Not clean, just quick.