DatePicker
Table of Contents
Usage
Default (simple)
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
Hidden label
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker>
<DatePickerInput
hideLabel
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
Light variant
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker light>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
Extra-large size
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker>
<DatePickerInput
size="xl"
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
Small size
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker>
<DatePickerInput
size="sm"
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
Invalid state
Invalid date
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker>
<DatePickerInput
invalid
invalidText="Invalid date"
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
Disabled state
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker>
<DatePickerInput
disabled
labelText="Date of birth"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
Single
<script>
import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>
<DatePicker datePickerType="single">
<DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
</DatePicker>
Skeleton
<script>
import { DatePickerSkeleton } from "carbon-components-svelte";
</script>
<DatePickerSkeleton />