{#if label}
{/if}
(valid = e.detail.valid)}
bind:this={hiddenInput}
/>
{
if (!hourInput) return;
if (e.key === 'ArrowRight' && hourInput.selectionEnd === hourInput.value.length) {
minuteInput?.focus();
}
if (e.key === 'ArrowUp') {
if (!incrementValue(hourInput, 12, 1)) {
toggleAMPM();
}
}
if (e.key === 'ArrowDown') {
if (!decrementValue(hourInput, 12, 1)) {
toggleAMPM();
}
}
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
return;
}
}}
oninput={() => {
updateValue();
if (hourInput?.value.length === 2) {
minuteInput?.focus();
}
}}
onblur={() => {
if (!hourInput) return;
const hourValue = parseInt(hourInput.value);
if (hourValue > 12) {
hourInput.value = (hourValue - 12).toString();
ampm = 'PM';
}
updateValue();
}}
bind:ref={hourInput}
/>
:
{
if (!minuteInput) return;
if (e.key === 'ArrowLeft' && minuteInput.selectionStart === 0) {
hourInput?.focus();
} else if (
e.key === 'ArrowRight' &&
minuteInput.selectionEnd === minuteInput.value.length
) {
amButton?.focus();
} else if (e.key === 'Backspace' && minuteInput.value.length === 0) {
hourInput?.focus();
}
if (e.key === 'ArrowUp') {
incrementValue(minuteInput, 59, 0);
}
if (e.key === 'ArrowDown') {
decrementValue(minuteInput, 59, 0);
}
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
return;
}
}}
oninput={() => {
updateValue();
}}
onblur={() => {
if (minuteInput?.value.length === 1) {
minuteInput.value = '0' + minuteInput.value;
}
}}
bind:ref={minuteInput}
/>