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

docs(date-picker): feature single/range examples first

Browse source 
#1194
This commit is contained in:
Eric Liu 2022-05-14 11:42:02 -07:00
commit 39b7448014
1 changed files with 33 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,39 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
### Default (simple) Carbon uses the zero dependency [flatpickr](https://github.com/flatpickr/flatpickr) library for its underlying calendar implementation.
Set `datePickerType` to `"single"` or `"range"` for the calendar functionality.
Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flatpickrProps` prop.
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
</div>
</InlineNotification>
### Single
By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal).
Set `flatpickrProps.static` to `false` to opt out of this behavior.
<FileSource src="/framed/DatePicker/DatePickerSingle" />
### Range
Set `datePickerType` to `"range"` for the range variant.
<FileSource src="/framed/DatePicker/DatePickerRange" />
### DatePicker in a modal
<FileSource src="/framed/DatePicker/DatePickerModal" />
### Simple
By default, the "simple" date picker does not have a dropdown calendar.
<DatePicker> <DatePicker>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" /> <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
@ -61,34 +93,6 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
<DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" /> <DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker> </DatePicker>
### Single
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">
If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
</div>
</InlineNotification>
Carbon uses the zero dependency [flatpickr](https://github.com/flatpickr/flatpickr) library for its underlying calendar implementation.
Set `datePickerType` to `"single"` or `"range"` for the calendar functionality.
By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal).
Set `flatpickrProps.static` to `false` to opt out of this behavior.
Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flatpickrProps` prop.
<FileSource src="/framed/DatePicker/DatePickerSingle" />
### Range
<FileSource src="/framed/DatePicker/DatePickerRange" />
### DatePicker in a modal
<FileSource src="/framed/DatePicker/DatePickerModal" />
### Skeleton ### Skeleton
<DatePickerSkeleton /> <DatePickerSkeleton />