Level 75
@tray2 some custom coding in an if statement isn't allowed in your scenario?
Also found: https://gist.github.com/sjardim/ad65961826c31c2af6210317ed541158
Mayne you can adapt it to times.
Oct 20, 2023
3
Level 73
Filament input mask with optional pattern
I've been playing around with Filament, and am very happy with how easy and fast it is to develop in.
I've seen that you can put a Alpine mask on the input field like this
TextInput::make('runtime')
->required()
->mask('99:99')
->placeholder('00:00'),
While this works fine for most tracks fitting the form mm:ss, but I would also like it to accept values that don't have the leading 0, so that I can write 3:15 instead of 03:15, that means that I need the first digit in the mask to be optional, and if god forbid, a track is longer than 59:59, I also would like to have the hh of hh:mm:ss optional as well. I tried using a regex to handle that in a RawJs but either it screamed at me, or didn't do anything.
Can anyone of you help out with ideas, because the five or six blogs I've visited, just reiterates the examples from the docs?
Level 73
@jlrdw You can pass a closure instead of a mask, but it uses Alpine's mask functionality behind the scenes, so I'm not certain how to acheive what I need. I would like to utilize as much of the built in and not need too much custom code.
Level 73
Just for future reference, this is how I solved it. it now handles hh:mm:ss in these formats.
- 1:11
- 11:11
- 1:11:11
- 11:11:11
->mask(RawJs::make(<<<'JS'
let mask = function test(value) {
let val = value.replaceAll(':', '');
switch(true) {
case val.length <= 2:
return val;
case val.length === 3:
return val.substr(0, 1) + ':' + val.substr(1, 2);
case val.length === 4:
return val.substr(0, 2) + ':' + val.substr(2, 2);
case val.length === 5:
return val.substr(0, 1) + ':' + val.substr(1, 2) + ':' + val.substr(3, 2);
case val.length === 6:
return val.substr(0, 2) + ':' + val.substr(2, 2) + ':' + val.substr(4, 2);
default:
return '';
}
}
$el.value = mask($input);
JS)),
1 like
Please or to participate in this conversation.