diff --git a/packages/react/src/components/DatePicker/DatePicker-story.js b/packages/react/src/components/DatePicker/DatePicker-story.js index 572dd1a130d0..d975b2fc0bd5 100644 --- a/packages/react/src/components/DatePicker/DatePicker-story.js +++ b/packages/react/src/components/DatePicker/DatePicker-story.js @@ -87,12 +87,6 @@ export const Simple = () => ( Simple.storyName = 'simple'; -Simple.parameters = { - info: { - text: 'A simple Date Picker consists of an input field and no calendar.', - }, -}; - export const Single = () => ( @@ -101,14 +95,6 @@ export const Single = () => ( Single.storyName = 'single with calendar'; -Single.parameters = { - info: { - text: ` - A single Date Picker consists of an input field and a calendar. - `, - }, -}; - export const Range = () => { return ( @@ -126,92 +112,12 @@ export const Range = () => { Range.storyName = 'range with calendar'; -Range.parameters = { - info: { - text: ` - A range Date Picker consists of two input fields and a calendar. - `, - }, -}; - export const DatePickerPlayground = () => ( ); -// export const RangeWithCalendarAndMinMaxDates = () => { -// const datePickerInputProps = props.datePickerInput(); -// return ( -// -// -// -// -// ); -// }; - -// RangeWithCalendarAndMinMaxDates.storyName = -// 'range with calendar and min/max dates'; - -// RangeWithCalendarAndMinMaxDates.parameters = { -// info: { -// text: ` -// A range Date Picker consists of two input fields and a calendar, and optionally, the minDate and maxDate fields. -// `, -// }, -// }; - -// export const FullyControlled = () => ( -// -// {({ state, setState }) => ( -// <> -// { -// const value = eventOrDates.target -// ? eventOrDates.target.value -// : eventOrDates[0]; -// setState({ date: value }); -// }}> -// -// -// -// -// )} -// -// ); - -// FullyControlled.storyName = 'fully controlled'; - -// FullyControlled.parameters = { -// info: { -// text: ` -// If your application needs to control the value of the date picker and -// be notified of any changes. -// `, -// }, -// }; - export const Skeleton = () => ; Skeleton.storyName = 'skeleton'; - -// Skeleton.parameters = { -// info: { -// text: ` -// Placeholder skeleton state to use when content is loading. -// `, -// }, -// }; diff --git a/packages/react/src/components/DatePicker/DatePicker.mdx b/packages/react/src/components/DatePicker/DatePicker.mdx index 780ba86bed79..cdd70a491a9c 100644 --- a/packages/react/src/components/DatePicker/DatePicker.mdx +++ b/packages/react/src/components/DatePicker/DatePicker.mdx @@ -8,8 +8,18 @@ import DatePickerInput from '../DatePickerInput'; - [Overview](#overview) + - [Simple DatePicker](#simple-datepicker) + - [Range Datepicker](#range-datepicker) + - [Skeleton state](#skeleton-state) - [Component API](#component-api) + - [DatePicker `appendTo`](#datepicker-appendto) - [DatePicker `className`](#datepicker-classname) + - [DatePicker `dateFormat`](#datepicker-dateformat) + - [DatePicker `datePickerType`](#datepicker-datepickertype) + - [DatePicker `light`](#datepicker-light) + - [DatePicker `locale`](#datepicker-locale) + - [DatePicker `maxDate`](#datepicker-maxdate) + - [DatePicker `minDate`](#datepicker-mindate) - [References](#references) - [Feedback](#feedback) @@ -58,16 +68,160 @@ You can use the `DatePickerSkeleton` component to render a skeleton variant of a +### DatePicker `appendTo` + +By default, the `DatePicker` menu will be appended to the end of the `body` +element. If you would like to attach it to a different node, you can specify a +DOM element with the `appendTo` prop. + +```jsx +const node = document.querySelector('#my-node'); + +...; +``` + ### DatePicker `className` The className prop passed into `DatePicker` will be forwarded along to the -underlying wrapper `div.bx--content-switcher` element. This is useful for -specifying a custom class name for layout. +underlying wrapper `div.bx--date-picker` element. This is useful for specifying +a custom class name for layout. ```jsx ... ``` +### DatePicker `dateFormat` + +You can use the `dateFormat` prop to change how the selected date is displayed +in the input. For a complete list of supported date formatting tokens, please +see the Flatpickr +[documentation](https://flatpickr.js.org/formatting/#date-formatting-tokens) + + + + + +```jsx + + + +``` + +### DatePicker `datePickerType` + +There are three supported variations of `DatePicker` in Carbon. + +- `simple` will render a simple text input _without_ a calendar dropdown. +- `single` will render a a single text input _with_ a calendar dropdown. +- `range` will indicate that multiple `DatePicker` inputs will be rendered. Two + `DatePickerInput` will need to be provided as children. + +```jsx + + + + +``` + +### DatePicker `light` + +In certain circumstances, a `DatePicker` will exist on a container element with +the same background color. To improve contrast, you can use the `light` property +to toggle the light variant of the `DatePicker`. + +```jsx +... +``` + +### DatePicker `locale` + +The `locale` prop can be used to help with internationalization. For best +results, combine with the `dateFormat` prop. We pass this under the hood to the +FlatPickr instance. A complete list of valid locales can be found in the +[component API](#component-api) section + + + + + +```jsx +// Load Norwegian text with the proper date format + + + +``` + +### DatePicker `maxDate` + +Limits the date selection to any date before the date specified. The string +format depends on the `locale` specified. For example, the top example below is +using the default US date format, and the one below it is using the same format +as the `locale` prop example. One is setting it as September 1st, and the other +is setting it as January 9th. + + + + +
+ + + + +```jsx + + + + + + +; +``` + +### DatePicker `minDate` + +Works similarly to the `maxDate` prop. [See above](#datepicker-maxdate). + + + + + +### DatePicker `value` + +By default `DatePicker` will set the current date as its value. If you'd like to +start this at a different date, you can pass in a date string or date object. + + + + +
+ + + + +```jsx + + + + + + + +``` + ## References ## Feedback