bc518174
 王天杨
提交两个项目文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
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>
);
}
|
