commit | author | age
|
752fa8
|
1 |
// Type definitions for react-datetime |
KJ |
2 |
// Project: https://github.com/YouCanBookMe/react-datetime |
|
3 |
// Definitions by: Ivan Verevkin <vereva@x-root.org> |
|
4 |
// Updates by: Aaron Spaulding <aaron@sachimp.com>, |
|
5 |
// Karol Janyst <http://github.com/LKay> |
|
6 |
|
|
7 |
import { Component, ChangeEvent, FocusEvent, FocusEventHandler } from "react"; |
|
8 |
import { Moment } from "moment"; |
|
9 |
|
|
10 |
export = ReactDatetimeClass; |
|
11 |
|
|
12 |
declare namespace ReactDatetimeClass { |
|
13 |
/* |
|
14 |
The view mode can be any of the following strings. |
|
15 |
*/ |
|
16 |
export type ViewMode = "years" | "months" | "days" | "time"; |
|
17 |
|
|
18 |
export interface TimeConstraint { |
|
19 |
min: number; |
|
20 |
max: number; |
|
21 |
step: number; |
|
22 |
} |
|
23 |
|
|
24 |
export interface TimeConstraints { |
|
25 |
hours?: TimeConstraint; |
|
26 |
minutes?: TimeConstraint; |
|
27 |
seconds?: TimeConstraint; |
|
28 |
milliseconds?: TimeConstraint; |
|
29 |
} |
|
30 |
|
|
31 |
type EventOrValueHandler<Event> = (event: Event | Moment | string) => void; |
|
32 |
|
|
33 |
export interface DatetimepickerProps { |
|
34 |
/* |
|
35 |
Represents the selected date by the component, in order to use it as a controlled component. |
|
36 |
This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date. |
|
37 |
*/ |
3551b7
|
38 |
value?: Date | string | Moment; |
752fa8
|
39 |
/* |
KJ |
40 |
Represents the selected date for the component to use it as a uncontrolled component. |
|
41 |
This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date. |
|
42 |
*/ |
3551b7
|
43 |
defaultValue?: Date | string | Moment; |
752fa8
|
44 |
/* |
c276ec
|
45 |
Represents the month which is viewed on opening the calendar when there is no selected date. |
SVT |
46 |
This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object. |
|
47 |
*/ |
|
48 |
viewDate?: Date | string | Moment; |
|
49 |
/* |
752fa8
|
50 |
Defines the format for the date. It accepts any moment.js date format. |
KJ |
51 |
If true the date will be displayed using the defaults for the current locale. |
|
52 |
If false the datepicker is disabled and the component can be used as timepicker. |
|
53 |
*/ |
3551b7
|
54 |
dateFormat?: boolean | string; |
752fa8
|
55 |
/* |
KJ |
56 |
Defines the format for the time. It accepts any moment.js time format. |
|
57 |
If true the time will be displayed using the defaults for the current locale. |
|
58 |
If false the timepicker is disabled and the component can be used as datepicker. |
|
59 |
*/ |
3551b7
|
60 |
timeFormat?: boolean | string; |
752fa8
|
61 |
/* |
KJ |
62 |
Whether to show an input field to edit the date manually. |
|
63 |
*/ |
|
64 |
input?: boolean; |
|
65 |
/* |
|
66 |
Whether to open or close the picker. If not set react-datetime will open the |
|
67 |
datepicker on input focus and close it on click outside. |
|
68 |
*/ |
|
69 |
open?: boolean; |
|
70 |
/* |
|
71 |
Manually set the locale for the react-datetime instance. |
|
72 |
Moment.js locale needs to be loaded to be used, see i18n docs. |
|
73 |
*/ |
|
74 |
locale?: string; |
|
75 |
/* |
|
76 |
Whether to interpret input times as UTC or the user's local timezone. |
|
77 |
*/ |
|
78 |
utc?: boolean; |
|
79 |
/* |
|
80 |
Callback trigger when the date changes. The callback receives the selected `moment` object as |
|
81 |
only parameter, if the date in the input is valid. If the date in the input is not valid, the |
|
82 |
callback receives the value of the input (a string). |
|
83 |
*/ |
|
84 |
onChange?: EventOrValueHandler<ChangeEvent<any>>; |
|
85 |
/* |
|
86 |
Callback trigger for when the user opens the datepicker. |
|
87 |
*/ |
|
88 |
onFocus?: FocusEventHandler<any>; |
|
89 |
/* |
|
90 |
Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. |
|
91 |
The callback receives the selected `moment` object as only parameter, if the date in the input |
|
92 |
is valid. If the date in the input is not valid, the callback receives the value of the |
|
93 |
input (a string). |
|
94 |
*/ |
|
95 |
onBlur?: EventOrValueHandler<FocusEvent<any>>; |
|
96 |
/* |
b8d07e
|
97 |
Callback trigger when the view mode changes. The callback receives the selected view mode |
SE |
98 |
string ('years', 'months', 'days', 'time') as only parameter. |
|
99 |
*/ |
|
100 |
onViewModeChange?: (viewMode: string) => void; |
|
101 |
/* |
d40f6d
|
102 |
Callback trigger when the user navigates to the previous month, year or decade. |
DDD |
103 |
The callback receives the amount and type ('month', 'year') as parameters. |
|
104 |
*/ |
|
105 |
onNavigateBack?: (amount: number, type: string) => void; |
|
106 |
/* |
|
107 |
Callback trigger when the user navigates to the next month, year or decade. |
|
108 |
The callback receives the amount and type ('month', 'year') as parameters. |
|
109 |
*/ |
|
110 |
onNavigateForward?: (amount: number, type: string) => void; |
|
111 |
/* |
752fa8
|
112 |
The default view to display when the picker is shown. ('years', 'months', 'days', 'time') |
KJ |
113 |
*/ |
3551b7
|
114 |
viewMode?: ViewMode | number; |
752fa8
|
115 |
/* |
KJ |
116 |
Extra class names for the component markup. |
|
117 |
*/ |
|
118 |
className?: string; |
|
119 |
/* |
|
120 |
Defines additional attributes for the input element of the component. |
|
121 |
*/ |
|
122 |
inputProps?: React.HTMLProps<HTMLInputElement>; |
|
123 |
/* |
|
124 |
Define the dates that can be selected. The function receives (currentDate, selectedDate) |
|
125 |
and should return a true or false whether the currentDate is valid or not. See selectable dates. |
|
126 |
*/ |
|
127 |
isValidDate?: (currentDate: any, selectedDate: any) => boolean; |
|
128 |
/* |
|
129 |
Customize the way that the days are shown in the day picker. The accepted function has |
|
130 |
the selectedDate, the current date and the default calculated props for the cell, |
|
131 |
and must return a React component. See appearance customization |
|
132 |
*/ |
|
133 |
renderDay?: (props: any, currentDate: any, selectedDate: any) => JSX.Element; |
|
134 |
/* |
|
135 |
Customize the way that the months are shown in the month picker. |
|
136 |
The accepted function has the selectedDate, the current date and the default calculated |
|
137 |
props for the cell, the month and the year to be shown, and must return a |
|
138 |
React component. See appearance customization |
|
139 |
*/ |
|
140 |
renderMonth?: (props: any, month: number, year: number, selectedDate: any) => JSX.Element; |
|
141 |
/* |
|
142 |
Customize the way that the years are shown in the year picker. |
|
143 |
The accepted function has the selectedDate, the current date and the default calculated |
|
144 |
props for the cell, the year to be shown, and must return a React component. |
|
145 |
See appearance customization |
|
146 |
*/ |
|
147 |
renderYear?: (props: any, year: number, selectedDate: any) => JSX.Element; |
|
148 |
/* |
|
149 |
Whether to use moment's strict parsing when parsing input. |
|
150 |
*/ |
|
151 |
strictParsing?: boolean; |
|
152 |
/* |
|
153 |
When true, once the day has been selected, the react-datetime will be automatically closed. |
|
154 |
*/ |
|
155 |
closeOnSelect?: boolean; |
|
156 |
/* |
|
157 |
Allow to add some constraints to the time selector. It accepts an object with the format |
|
158 |
{hours:{ min: 9, max: 15, step:2}} so the hours can't be lower than 9 or higher than 15, and |
|
159 |
it will change adding or subtracting 2 hours everytime the buttons are clicked. The constraints |
|
160 |
can be added to the hours, minutes, seconds and milliseconds. |
|
161 |
*/ |
|
162 |
timeConstraints?: TimeConstraints; |
|
163 |
/* |
|
164 |
When true, keep the picker open when click event is triggered outside of component. When false, |
|
165 |
close it. |
|
166 |
*/ |
|
167 |
disableOnClickOutside?: boolean; |
|
168 |
} |
|
169 |
|
|
170 |
export interface DatetimepickerState { |
|
171 |
updateOn: string; |
|
172 |
inputFormat: string; |
|
173 |
viewDate: Moment; |
|
174 |
selectedDate: Moment; |
|
175 |
inputValue: string; |
|
176 |
open: boolean; |
|
177 |
} |
|
178 |
} |
|
179 |
|
|
180 |
declare class ReactDatetimeClass extends Component<ReactDatetimeClass.DatetimepickerProps, ReactDatetimeClass.DatetimepickerState> {} |