mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 12:23:02 +00:00
docs(date-picker): improve "DatePicker in a modal" example
This commit is contained in:
parent
6aac5cc6d0
commit
373feac054
2 changed files with 12 additions and 1 deletions
|
@ -71,6 +71,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
|
|||
|
||||
### DatePicker in a modal
|
||||
|
||||
Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element.
|
||||
|
||||
This is needed when placing a `DatePicker` inside of a `Modal` component.
|
||||
|
||||
Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options.
|
||||
|
||||
<FileSource src="/framed/DatePicker/DatePickerModal" />
|
||||
|
||||
### Skeleton
|
||||
|
|
|
@ -2,7 +2,12 @@
|
|||
import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Modal open modalHeading="DatePicker">
|
||||
<Modal
|
||||
open
|
||||
modalHeading="Meeting date"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
>
|
||||
<DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
|
||||
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue