DatePicker
DatePicker is used to select or input a date.
You're doing it wrong!
<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 | 
