mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
edefd6429b* fix(date-picker): append calendar to date picker element #345 Fixes #345 * fix(date-picker): do not import rangePlugin from esm folder * fix(date-picker): correctly type change event for single/range types * feat(date-picker): add valueFrom, valueTo for range datepicker * docs(date-picker): add range type example * docs(date-picker): extract range example to iframe * docs(date-picker): extract single type to iframe
62 lines
1.2 KiB
Svelte
62 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { DatePicker, DatePickerSkeleton, DatePickerInput } from "../types";
|
|
</script>
|
|
|
|
<DatePicker
|
|
on:change="{(e) => {
|
|
console.log(e.detail);
|
|
}}"
|
|
>
|
|
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
|
</DatePicker>
|
|
|
|
<DatePicker>
|
|
<DatePickerInput
|
|
hideLabel
|
|
labelText="Date of birth"
|
|
placeholder="mm/dd/yyyy"
|
|
/>
|
|
</DatePicker>
|
|
|
|
<DatePicker light>
|
|
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
|
</DatePicker>
|
|
|
|
<DatePicker>
|
|
<DatePickerInput
|
|
size="xl"
|
|
labelText="Date of birth"
|
|
placeholder="mm/dd/yyyy"
|
|
/>
|
|
</DatePicker>
|
|
|
|
<DatePicker>
|
|
<DatePickerInput
|
|
size="sm"
|
|
labelText="Date of birth"
|
|
placeholder="mm/dd/yyyy"
|
|
/>
|
|
</DatePicker>
|
|
|
|
<DatePicker>
|
|
<DatePickerInput
|
|
invalid
|
|
invalidText="Invalid date"
|
|
labelText="Date of birth"
|
|
placeholder="mm/dd/yyyy"
|
|
/>
|
|
</DatePicker>
|
|
|
|
<DatePicker>
|
|
<DatePickerInput
|
|
disabled
|
|
labelText="Date of birth"
|
|
placeholder="mm/dd/yyyy"
|
|
/>
|
|
</DatePicker>
|
|
|
|
<DatePicker valueFrom="" valueTo="" datePickerType="single">
|
|
<DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
|
|
</DatePicker>
|
|
|
|
<DatePickerSkeleton />
|