115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
import { DayPickerDefaultProps } from 'types/DayPickerDefault';
|
||
import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
|
||
import { DayPickerRangeProps } from 'types/DayPickerRange';
|
||
import { DayPickerSingleProps } from 'types/DayPickerSingle';
|
||
|
||
import { Root } from './components/Root';
|
||
import { RootProvider } from './contexts/RootProvider';
|
||
|
||
export type DayPickerProps =
|
||
| DayPickerDefaultProps
|
||
| DayPickerSingleProps
|
||
| DayPickerMultipleProps
|
||
| DayPickerRangeProps;
|
||
|
||
/**
|
||
* DayPicker render a date picker component to let users pick dates from a
|
||
* calendar. See http://react-day-picker.js.org for updated documentation and
|
||
* examples.
|
||
*
|
||
* ### Customization
|
||
*
|
||
* DayPicker offers different customization props. For example,
|
||
*
|
||
* - show multiple months using `numberOfMonths`
|
||
* - display a dropdown to navigate the months via `captionLayout`
|
||
* - display the week numbers with `showWeekNumbers`
|
||
* - disable or hide days with `disabled` or `hidden`
|
||
*
|
||
* ### Controlling the months
|
||
*
|
||
* Change the initially displayed month using the `defaultMonth` prop. The
|
||
* displayed months are controlled by DayPicker and stored in its internal
|
||
* state. To control the months yourself, use `month` instead of `defaultMonth`
|
||
* and use the `onMonthChange` event to set it.
|
||
*
|
||
* To limit the months the user can navigate to, use
|
||
* `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.
|
||
*
|
||
* ### Selection modes
|
||
*
|
||
* DayPicker supports different selection mode that can be toggled using the
|
||
* `mode` prop:
|
||
*
|
||
* - `mode="single"`: only one day can be selected. Use `required` to make the
|
||
* selection required. Use the `onSelect` event handler to get the selected
|
||
* days.
|
||
* - `mode="multiple"`: users can select one or more days. Limit the amount of
|
||
* days that can be selected with the `min` or the `max` props.
|
||
* - `mode="range"`: users can select a range of days. Limit the amount of days
|
||
* in the range with the `min` or the `max` props.
|
||
* - `mode="default"` (default): the built-in selections are disabled. Implement
|
||
* your own selection mode with `onDayClick`.
|
||
*
|
||
* The selection modes should cover the most common use cases. In case you
|
||
* need a more refined way of selecting days, use `mode="default"`. Use the
|
||
* `selected` props and add the day event handlers to add/remove days from the
|
||
* selection.
|
||
*
|
||
* ### Modifiers
|
||
*
|
||
* A _modifier_ represents different styles or states for the days displayed in
|
||
* the calendar (like "selected" or "disabled"). Define custom modifiers using
|
||
* the `modifiers` prop.
|
||
*
|
||
* ### Formatters and custom component
|
||
*
|
||
* You can customize how the content is displayed in the date picker by using
|
||
* either the formatters or replacing the internal components.
|
||
*
|
||
* For the most common cases you want to use the `formatters` prop to change how
|
||
* the content is formatted in the calendar. Use the `components` prop to
|
||
* replace the internal components, like the navigation icons.
|
||
*
|
||
* ### Styling
|
||
*
|
||
* DayPicker comes with a default, basic style in `react-day-picker/style` – use
|
||
* it as template for your own style.
|
||
*
|
||
* If you are using CSS modules, pass the imported styles object the
|
||
* `classNames` props.
|
||
*
|
||
* You can also style the elements via inline styles using the `styles` prop.
|
||
*
|
||
* ### Form fields
|
||
*
|
||
* If you need to bind the date picker to a form field, you can use the
|
||
* `useInput` hooks for a basic behavior. See the `useInput` source as an
|
||
* example to bind the date picker with form fields.
|
||
*
|
||
* ### Localization
|
||
*
|
||
* To localize DayPicker, import the locale from `date-fns` package and use the
|
||
* `locale` prop.
|
||
*
|
||
* For example, to use Spanish locale:
|
||
*
|
||
* ```
|
||
* import { es } from 'date-fns/locale';
|
||
* <DayPicker locale={es} />
|
||
* ```
|
||
*/
|
||
export function DayPicker(
|
||
props:
|
||
| DayPickerDefaultProps
|
||
| DayPickerSingleProps
|
||
| DayPickerMultipleProps
|
||
| DayPickerRangeProps
|
||
): JSX.Element {
|
||
return (
|
||
<RootProvider {...props}>
|
||
<Root initialProps={props} />
|
||
</RootProvider>
|
||
);
|
||
}
|