mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(date-picker): improve "DatePicker in a modal" example

Browse source
This commit is contained in:
Eric Liu 2022-01-01 10:05:12 -08:00
commit 373feac054
2 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/src/pages/components/DatePicker.svx
View file

@ -71,6 +71,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
### DatePicker in a modal ### 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" /> <FileSource src="/framed/DatePicker/DatePickerModal" />
### Skeleton ### Skeleton

7
docs/src/pages/framed/DatePicker/DatePickerModal.svelte
View file

@ -2,7 +2,12 @@
import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte"; import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
</script> </script>
<Modal open modalHeading="DatePicker"> <Modal
open
modalHeading="Meeting date"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
>
<DatePicker datePickerType="single" flatpickrProps="{{ static: true }}"> <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" /> <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
</DatePicker> </DatePicker>