react-picky-date-time 2.0.5 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/CLASS-VERSION.md +142 -0
- package/README.md +130 -113
- package/package.json +1 -1
- package/tea.yaml +6 -0
package/CHANGELOG.md
CHANGED
package/CLASS-VERSION.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# Usage
|
|
2
|
+
```js
|
|
3
|
+
import ReactPickyDateTime from 'react-picky-date-time';
|
|
4
|
+
|
|
5
|
+
...
|
|
6
|
+
class YourOwnComponent extends Component {
|
|
7
|
+
constructor(props) {
|
|
8
|
+
super(props);
|
|
9
|
+
this.state = {
|
|
10
|
+
showPickyDateTime: true,
|
|
11
|
+
date: '30',
|
|
12
|
+
month: '01',
|
|
13
|
+
year: '2000',
|
|
14
|
+
hour: '03',
|
|
15
|
+
minute: '10',
|
|
16
|
+
second: '40',
|
|
17
|
+
meridiem: 'PM'
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
...
|
|
21
|
+
render() {
|
|
22
|
+
const {
|
|
23
|
+
showPickyDateTime,
|
|
24
|
+
date,
|
|
25
|
+
month,
|
|
26
|
+
year,
|
|
27
|
+
hour,
|
|
28
|
+
minute,
|
|
29
|
+
second,
|
|
30
|
+
meridiem
|
|
31
|
+
} = this.state;
|
|
32
|
+
|
|
33
|
+
return(
|
|
34
|
+
<ReactPickyDateTime
|
|
35
|
+
size="m"// 'xs', 's', 'm', 'l'
|
|
36
|
+
mode={0} //0: calendar only, 1: calendar and clock, 2: clock only; default is 0
|
|
37
|
+
locale={`zh-cn`}// 'en-us' or 'zh-cn'; default is en-us
|
|
38
|
+
show={showPickyDateTime} //default is false
|
|
39
|
+
onClose={() => this.setState({ showPickyDateTime: false })}
|
|
40
|
+
defaultTime={`${hour}:${minute}:${second} ${meridiem}`} // OPTIONAL. format: "HH:MM:SS AM"
|
|
41
|
+
defaultDate={`${month}/${date}/${year}`} // OPTIONAL. format: "MM/DD/YYYY"
|
|
42
|
+
onYearPicked={res => this.onYearPicked(res)}
|
|
43
|
+
onMonthPicked={res => this.onMonthPicked(res)}
|
|
44
|
+
onDatePicked={res => this.onDatePicked(res)}
|
|
45
|
+
onResetDate={res => this.onResetDate(res)}
|
|
46
|
+
onResetDefaultDate={res => this.onResetDefaultDate(res)}
|
|
47
|
+
onSecondChange={res => this.onSecondChange(res)}
|
|
48
|
+
onMinuteChange={res => this.onMinuteChange(res)}
|
|
49
|
+
onHourChange={res => this.onHourChange(res)}
|
|
50
|
+
onMeridiemChange={res => this.onMeridiemChange(res)}
|
|
51
|
+
onResetTime={res => this.onResetTime(res)}
|
|
52
|
+
onResetDefaultTime={res => this.onResetDefaultTime(res)}
|
|
53
|
+
onClearTime={res => this.onClearTime(res)}
|
|
54
|
+
// markedDates={['10/19/2021']} // OPTIONAL. format: "MM/DD/YYYY"
|
|
55
|
+
// supportDateRange={['12/03/2021', '12/05/2021']} // OPTIONAL. min date and max date. format: "MM/DD/YYYY"
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
# Events
|
|
64
|
+
|
|
65
|
+
Also consoled out on the demo page examples
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
onYearPicked(res) {
|
|
69
|
+
const { year } = res;
|
|
70
|
+
this.setState({ year: year});
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
onMonthPicked(res) {
|
|
74
|
+
const { month, year } = res;
|
|
75
|
+
this.setState({ year: year, month: month});
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
onDatePicked(res) {
|
|
79
|
+
const { date, month, year } = res;
|
|
80
|
+
this.setState({ year: year, month: month, date: date });
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
onResetDate(res) {
|
|
84
|
+
const { date, month, year } = res;
|
|
85
|
+
this.setState({ year: year, month: month, date: date });
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
onResetDefaultDate(res) {
|
|
89
|
+
const { date, month, year } = res;
|
|
90
|
+
this.setState({ year: year, month: month, date: date });
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
onSecondChange(res) {
|
|
94
|
+
this.setState({ second: res.value });
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
onMinuteChange(res) {
|
|
98
|
+
this.setState({ minute: res.value });
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
onHourChange(res) {
|
|
102
|
+
this.setState({ hour: res.value });
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
onMeridiemChange(res) {
|
|
106
|
+
this.setState({ meridiem: res });
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
onResetTime(res) {
|
|
110
|
+
this.setState({
|
|
111
|
+
second: res.clockHandSecond.value,
|
|
112
|
+
minute: res.clockHandMinute.value,
|
|
113
|
+
hour: res.clockHandHour.value
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
onResetDefaultTime(res) {
|
|
118
|
+
this.setState({
|
|
119
|
+
second: res.clockHandSecond.value,
|
|
120
|
+
minute: res.clockHandMinute.value,
|
|
121
|
+
hour: res.clockHandHour.value
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
onClearTime(res) {
|
|
126
|
+
this.setState({
|
|
127
|
+
second: res.clockHandSecond.value,
|
|
128
|
+
minute: res.clockHandMinute.value,
|
|
129
|
+
hour: res.clockHandHour.value
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// just toggle your outter component state to true or false to show or hide <PickyDateTime/>
|
|
134
|
+
openPickyDateTime() {
|
|
135
|
+
this.setState({showPickyDateTime: true});
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
onClose() {
|
|
139
|
+
this.setState({showPickyDateTime: false});
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
```
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
|
3
3
|
[](#contributors-)
|
|
4
4
|
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
5
|
-
[](https://badge.fury.io/js/react-picky-date-time)  [](https://raw.githubusercontent.com/edwardfxiao/react-picky-date-time/master/LICENSE)[](https://github.com/996icu/996.ICU/blob/master/LICENSE)[](https://996.icu)
|
|
5
|
+
[](https://badge.fury.io/js/react-picky-date-time)   [](https://raw.githubusercontent.com/edwardfxiao/react-picky-date-time/master/LICENSE) [](https://github.com/996icu/996.ICU/blob/master/LICENSE) [](https://996.icu)
|
|
6
6
|
|
|
7
7
|
A react component for date time picker.
|
|
8
8
|
|
|
@@ -30,74 +30,84 @@ Attention: <a href="https://github.com/edwardfxiao/react-picky-date-time/blob/gh
|
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
# Docs Link
|
|
33
|
-
[Custom Locale
|
|
33
|
+
[Custom Locale Guide(can be multiple locales)](#custom-locale)
|
|
34
34
|
|
|
35
35
|
# Usage
|
|
36
|
+
|
|
36
37
|
```js
|
|
37
38
|
import ReactPickyDateTime from 'react-picky-date-time';
|
|
38
39
|
|
|
39
40
|
...
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
minute: '10',
|
|
50
|
-
second: '40',
|
|
51
|
-
meridiem: 'PM'
|
|
52
|
-
};
|
|
53
|
-
}
|
|
41
|
+
const Index = memo(() => {
|
|
42
|
+
const [showPickyDateTime, setShowPickyDateTime] = useState(true);
|
|
43
|
+
const [date, setDate] = useState('30');
|
|
44
|
+
const [month, setMonth] = useState('01');
|
|
45
|
+
const [year, setYear] = useState('2000');
|
|
46
|
+
const [hour, setHour] = useState('03');
|
|
47
|
+
const [minute, setMinute] = useState('10');
|
|
48
|
+
const [second, setSecond] = useState('40');
|
|
49
|
+
const [meridiem, setMeridiem] = useState('PM');
|
|
54
50
|
...
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
meridiem
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
onHourChange={res => this.onHourChange(res)}
|
|
84
|
-
onMeridiemChange={res => this.onMeridiemChange(res)}
|
|
85
|
-
onResetTime={res => this.onResetTime(res)}
|
|
86
|
-
onResetDefaultTime={res => this.onResetDefaultTime(res)}
|
|
87
|
-
onClearTime={res => this.onClearTime(res)}
|
|
88
|
-
// markedDates={['10/19/2021']} // OPTIONAL. format: "MM/DD/YYYY"
|
|
89
|
-
// supportDateRange={['12/03/2021', '12/05/2021']} // OPTIONAL. min date and max date. format: "MM/DD/YYYY"
|
|
90
|
-
/>
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
51
|
+
// See events section
|
|
52
|
+
...
|
|
53
|
+
return (
|
|
54
|
+
<ReactPickyDateTime
|
|
55
|
+
size="m" // 'xs', 's', 'm', 'l'
|
|
56
|
+
mode={0} //0: calendar only, 1: calendar and clock, 2: clock only; default is 0
|
|
57
|
+
locale="en-us" // 'en-us' or 'zh-cn'; default is en-us
|
|
58
|
+
show={showPickyDateTime} //default is false
|
|
59
|
+
onClose={() => setShowPickyDateTime(false)}
|
|
60
|
+
defaultTime={`${hour}:${minute}:${second} ${meridiem}`} // OPTIONAL. format: "HH:MM:SS AM"
|
|
61
|
+
defaultDate={`${month}/${date}/${year}`} // OPTIONAL. format: "MM/DD/YYYY"
|
|
62
|
+
onYearPicked={res => onYearPicked(res)}
|
|
63
|
+
onMonthPicked={res => onMonthPicked(res)}
|
|
64
|
+
onDatePicked={res => onDatePicked(res)}
|
|
65
|
+
onResetDate={res => onResetDate(res)}
|
|
66
|
+
onResetDefaultDate={res => onResetDefaultDate(res)}
|
|
67
|
+
onSecondChange={res => onSecondChange(res)}
|
|
68
|
+
onMinuteChange={res => onMinuteChange(res)}
|
|
69
|
+
onHourChange={res => onHourChange(res)}
|
|
70
|
+
onMeridiemChange={res => onMeridiemChange(res)}
|
|
71
|
+
onResetTime={res => onResetTime(res)}
|
|
72
|
+
onResetDefaultTime={res => onResetDefaultTime(res)}
|
|
73
|
+
onClearTime={res => onClearTime(res)}
|
|
74
|
+
// markedDates={['10/19/2021']} // OPTIONAL. format: "MM/DD/YYYY"
|
|
75
|
+
// supportDateRange={['12/03/2021', '12/05/2021']} // OPTIONAL. min date and max date. format: "MM/DD/YYYY"
|
|
76
|
+
/>
|
|
77
|
+
);
|
|
78
|
+
});
|
|
94
79
|
```
|
|
95
80
|
|
|
81
|
+
##### <a name="class-components"></a>[Class components version example goes here ->](/CLASS-VERSION.md)
|
|
82
|
+
|
|
96
83
|
# Installation
|
|
97
84
|
```sh
|
|
98
85
|
npm install react-picky-date-time --save
|
|
99
86
|
```
|
|
100
87
|
|
|
88
|
+
#### By CDN (starting from v1.9.1)
|
|
89
|
+
```html
|
|
90
|
+
<head>
|
|
91
|
+
...
|
|
92
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-picky-date-time/2.0.5/react-picky-date-time.min.css"/>
|
|
93
|
+
</head>
|
|
94
|
+
<body>
|
|
95
|
+
<div id="root"></div>
|
|
96
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
|
|
97
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
|
|
98
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-picky-date-time/2.0.5/react-picky-date-time.min.js"></script>
|
|
99
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
|
|
100
|
+
<script type="text/babel">
|
|
101
|
+
const App = React.memo(() => {
|
|
102
|
+
return (<ReactPickyDateTime .../>)
|
|
103
|
+
});
|
|
104
|
+
ReactDOM.render(<App />, document.getElementById('root'));
|
|
105
|
+
</script>
|
|
106
|
+
</body>
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
|
|
101
111
|
# Donate
|
|
102
112
|
<a href="https://www.paypal.me/XIAOMENGXIAO/0.99" target="_blank" alt="PayPal Donate">Thanks for donating me a donut! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄</a>
|
|
103
113
|
|
|
@@ -118,78 +128,85 @@ For IE9, you also need ```performance``` ```requestAnimationFrame``` polyfill fo
|
|
|
118
128
|
Also consoled out on the demo page examples
|
|
119
129
|
|
|
120
130
|
```js
|
|
121
|
-
onYearPicked
|
|
131
|
+
const onYearPicked = res => {
|
|
122
132
|
const { year } = res;
|
|
123
|
-
|
|
124
|
-
}
|
|
133
|
+
setYear(year);
|
|
134
|
+
};
|
|
125
135
|
|
|
126
|
-
onMonthPicked
|
|
136
|
+
const onMonthPicked = res => {
|
|
127
137
|
const { month, year } = res;
|
|
128
|
-
|
|
129
|
-
|
|
138
|
+
setMonth(month);
|
|
139
|
+
setYear(year);
|
|
140
|
+
};
|
|
130
141
|
|
|
131
|
-
onDatePicked
|
|
142
|
+
const onDatePicked = res => {
|
|
132
143
|
const { date, month, year } = res;
|
|
133
|
-
|
|
134
|
-
|
|
144
|
+
setDate(date);
|
|
145
|
+
setMonth(month);
|
|
146
|
+
setYear(year);
|
|
147
|
+
};
|
|
135
148
|
|
|
136
|
-
onResetDate
|
|
149
|
+
const onResetDate = res => {
|
|
137
150
|
const { date, month, year } = res;
|
|
138
|
-
|
|
139
|
-
|
|
151
|
+
setDate(date);
|
|
152
|
+
setMonth(month);
|
|
153
|
+
setYear(year);
|
|
154
|
+
};
|
|
140
155
|
|
|
141
|
-
onResetDefaultDate
|
|
156
|
+
const onResetDefaultDate = res => {
|
|
142
157
|
const { date, month, year } = res;
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
158
|
+
setDate(date);
|
|
159
|
+
setMonth(month);
|
|
160
|
+
setYear(year);
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
const onSecondChange = res => {
|
|
164
|
+
const { value } = res;
|
|
165
|
+
setSecond(value);
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
const onMinuteChange = res => {
|
|
169
|
+
const { value } = res;
|
|
170
|
+
setMinute(value);
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
const onHourChange = res => {
|
|
174
|
+
const { value } = res;
|
|
175
|
+
setHour(value);
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
const onMeridiemChange = res => {
|
|
179
|
+
setMeridiem(res);
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
const onResetTime = res => {
|
|
183
|
+
const { clockHandSecond, clockHandMinute, clockHandHour } = res;
|
|
184
|
+
setSecond(clockHandSecond.value);
|
|
185
|
+
setMinute(clockHandMinute.value);
|
|
186
|
+
setHour(clockHandHour.value);
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
const onResetDefaultTime = res => {
|
|
190
|
+
const { clockHandSecond, clockHandMinute, clockHandHour } = res;
|
|
191
|
+
setSecond(clockHandSecond.value);
|
|
192
|
+
setMinute(clockHandMinute.value);
|
|
193
|
+
setHour(clockHandHour.value);
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
const onClearTime = res => {
|
|
197
|
+
const { clockHandSecond, clockHandMinute, clockHandHour } = res;
|
|
198
|
+
setSecond(clockHandSecond.value);
|
|
199
|
+
setMinute(clockHandMinute.value);
|
|
200
|
+
setHour(clockHandHour.value);
|
|
201
|
+
};
|
|
185
202
|
|
|
186
203
|
// just toggle your outter component state to true or false to show or hide <PickyDateTime/>
|
|
187
204
|
openPickyDateTime() {
|
|
188
|
-
|
|
205
|
+
setShowPickyDateTime(true)
|
|
189
206
|
}
|
|
190
207
|
|
|
191
208
|
onClose() {
|
|
192
|
-
|
|
209
|
+
setShowPickyDateTime(false)
|
|
193
210
|
}
|
|
194
211
|
|
|
195
212
|
```
|
|
@@ -237,4 +254,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|
|
237
254
|
|
|
238
255
|
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
239
256
|
|
|
240
|
-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
|
257
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
package/package.json
CHANGED