svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve time input AM/PM selector, partial text implementation

Browse Source
This commit is contained in:
Elijah Duffy
2025-05-20 10:17:35 -07:00
parent 17f8c51ebd
commit 9a820794a2
1 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/TimeInput.svelte
View File

@@ -3,19 +3,24 @@
import Label from './Label.svelte'; import Label from './Label.svelte';
import StyledRawInput from './StyledRawInput.svelte'; import StyledRawInput from './StyledRawInput.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import moment from 'moment';
let { let {
name, name,
label, label,
value = $bindable(''), value = $bindable(''),
formattedValue = $bindable(''),
required, required,
invalidMessage = 'Please select a time' invalidMessage = 'Please select a time',
showText = false
}: { }: {
name: string; name: string;
label?: string; label?: string;
value?: string; value?: string;
formattedValue?: string;
required?: boolean; required?: boolean;
invalidMessage?: string; invalidMessage?: string;
showText?: boolean;
} = $props(); } = $props();
let ampm: 'AM' | 'PM' = $state('AM'); let ampm: 'AM' | 'PM' = $state('AM');
@@ -155,6 +160,8 @@
value = `${prefixZero((hourValue + (ampmLocal === 'PM' ? 12 : 0)).toString())}:${prefixZero(minuteValue.toString())}`; value = `${prefixZero((hourValue + (ampmLocal === 'PM' ? 12 : 0)).toString())}:${prefixZero(minuteValue.toString())}`;
updateHiddenInput(); updateHiddenInput();
// update formatted value
}; };
/** /**
@@ -298,8 +305,11 @@
<div class="flex flex-col"> <div class="flex flex-col">
<!-- AM Button --> <!-- AM Button -->
<button <button
class={['ampm rounded-t-sm border', ampm === 'AM' && 'selected']} class={['ampm rounded-t-sm border', ampm === 'AM' && 'selected ring-1 ring-blue-300']}
onclick={() => (ampm = 'AM')} onclick={() => {
ampm = 'AM';
updateValue();
}}
onkeydown={(e) => { onkeydown={(e) => {
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') minuteInput?.focus(); if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') minuteInput?.focus();
else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') pmButton.focus(); else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') pmButton.focus();
@@ -311,8 +321,14 @@
<!-- PM Button --> <!-- PM Button -->
<button <button
class={['ampm rounded-b-sm border-r border-b border-l', ampm === 'PM' && 'selected']} class={[
onclick={() => (ampm = 'PM')} 'ampm rounded-b-sm border-r border-b border-l',
ampm === 'PM' && 'selected ring-1 ring-blue-300'
]}
onclick={() => {
ampm = 'PM';
updateValue();
}}
onkeydown={(e) => { onkeydown={(e) => {
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') amButton?.focus(); if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') amButton?.focus();
}} }}
@@ -351,7 +367,7 @@
@apply border-accent dark:border-accent/50 cursor-pointer px-3 py-1 font-medium; @apply border-accent dark:border-accent/50 cursor-pointer px-3 py-1 font-medium;
&.selected { &.selected {
@apply bg-accent text-background dark:bg-accent/30 dark:text-background/90; @apply bg-accent text-background dark:bg-accent/30 dark:text-background/90 ring-1 ring-blue-600 dark:ring-blue-300;
} }
} }
</style> </style>