logo-icon
STWUI

DatePicker

DatePicker is used to select or input a date.





You're doing it wrong!



svelte
<script lang="ts">
	import { DatePicker } from 'stwui';

	const date2Max = new Date(2022, 7, 30);
	const date2Min = new Date(2022, 7, 3);

	const calendar = "svg-path";
	const phone = "svg-path";
</script>

<DatePicker name="date-1" placeholder="Basic" />

<DatePicker name="date-2" label="Date" max={date2Max} min={date2Min}>
	<DatePicker.Label slot="label">Date</DatePicker.Label>
	<DatePicker.Trailing slot="trailing" data={calendar} />
</DatePicker>

<DatePicker name="date-3" min={date2Min} error="Your doing it wrong">
	<DatePicker.Label slot="label">Date</DatePicker.Label>
	<DatePicker.Leading slot="leading" data={phone} />
</DatePicker>

DatePicker Props

name string
error string | undefined
placeholder string | undefined
value Date | null null
min Date | undefined
max Date | undefined
format string (dayjs format) MMMM D, YYYY
locale Locale {}
visible boolean false
closeOnSelect boolean true
handleSelect (d: Dayjs) => void) | undefined

DatePicker Slots

label <Input.Label slot="label" />
leading <Input.Leading slot="leading" />
trailing <Input.Trailing slot="trailing" />

DatePicker.Label Slots

default

DatePicker.Leading Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor

DatePicker.Trailing Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor