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

time input: add formatTime helper

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-22 11:28:35 -07:00
parent 026810b32d
commit 647235e1fe
2 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/routes/+page.svelte
View File

@@ -14,7 +14,7 @@
import RadioGroup from '$lib/RadioGroup.svelte';
import StyledRawInput from '$lib/StyledRawInput.svelte';
import TextInput from '$lib/TextInput.svelte';
import TimeInput from '$lib/TimeInput.svelte';
import TimeInput, { formatTime } from '$lib/TimeInput.svelte';
import TimezoneInput from '$lib/TimezoneInput.svelte';
import ToggleGroup from '$lib/ToggleGroup.svelte';
import ToggleSelect from '$lib/ToggleSelect.svelte';
@@ -31,6 +31,7 @@
} from 'phosphor-svelte';
import { ErrorMessage, type ComboboxOption, type Option } from '$lib';
import Tabs from '$lib/Tabs.svelte';
import { Time } from '@internationalized/date';
const comboboxOptions = [
{ value: 'option1', label: 'Option 1' },
@@ -46,6 +47,7 @@
'item two',
{ value: 'complex', label: 'Complex item' }
]);
let timeValue = $state<Time | null>(null);
const toolbar = new Toolbar();
const fontGroup = toolbar.group();
@@ -261,7 +263,10 @@
<InputGroup class="gap-8">
<TimeInput label="Regular time input" name="example-time-input" />
<TimeInput label="Compact time" compact />
<TimeInput label="Compact time" compact bind:value={timeValue} />
</InputGroup>
<InputGroup>
<p>Selected time is {formatTime(timeValue, 'undefined')}</p>
</InputGroup>
</div>