DatePicker
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 |