Skip to content

Commit 0c65af3

Browse files
authored
docs(datepicker): document parseDate prop (#18952)
* docs(datepicker): document parseDate prop * docs(datepicker): update mdx toc * chore: formatting
1 parent 9f3c446 commit 0c65af3

File tree

1 file changed

+20
-1
lines changed

1 file changed

+20
-1
lines changed

packages/react/src/components/DatePicker/DatePicker.mdx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
2727
- [DatePicker `appendTo`](#datepicker-appendto)
2828
- [DatePicker `className`](#datepicker-classname)
2929
- [DatePicker `dateFormat`](#datepicker-dateformat)
30+
- [DatePicker `parseDate`](#datepicker-parsedate)
3031
- [DatePicker `datePickerType`](#datepicker-datepickertype)
3132
- [DatePicker `light`](#datepicker-light)
3233
- [DatePicker `locale`](#datepicker-locale)
@@ -110,6 +111,7 @@ You can use the `DatePickerSkeleton` component to render a skeleton variant of a
110111
/>
111112

112113
### AI label
114+
113115
<Canvas
114116
of={DatePickerStories.withAILabel}
115117
additionalActions={[
@@ -151,7 +153,11 @@ a custom class name for layout.
151153
You can use the `dateFormat` prop to change how the selected date is displayed
152154
in the input. For a complete list of supported date formatting tokens, please
153155
see the Flatpickr
154-
[documentation](https://flatpickr.js.org/formatting/#date-formatting-tokens)
156+
[documentation](https://flatpickr.js.org/formatting/#date-formatting-tokens).
157+
158+
When configuring `dateFormat`, a `parseDate` function can be specified to modify
159+
the date correction behavior that is sometimes undesirable due to
160+
[oddities in how the native date methods work](https://github.com/carbon-design-system/carbon/issues/15432#issuecomment-1967447677).
155161

156162
<DatePicker datePickerType="single" dateFormat="Y-m-d">
157163
<DatePickerInput
@@ -167,6 +173,19 @@ see the Flatpickr
167173
</DatePicker>
168174
```
169175

176+
### DatePicker `parseDate`
177+
178+
Most often used when configuring `dateFormat`, a `parseDate` function can be
179+
specified to modify the date correction behavior that is sometimes undesirable
180+
due to
181+
[oddities in how the native date methods work](https://github.com/carbon-design-system/carbon/issues/15432#issuecomment-1967447677).
182+
183+
The specified `parseDate` function will be called before the date is actually
184+
set. It's called with a date parameter, the input value, that should be parsed
185+
and return a valid date string. The
186+
[internal/default implementation](https://github.com/search?q=repo%3Acarbon-design-system%2Fcarbon+symbol%3AparseDate+language%3ATSX&type=code&l=TSX)
187+
can be copied and used as a starting point.
188+
170189
### DatePicker `datePickerType`
171190

172191
There are three supported variations of `DatePicker` in Carbon.

0 commit comments

Comments
 (0)