react-picky-date-time 2.0.5 → 2.0.6

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/CLASS-VERSION.md +142 -0
  3. package/README.md +130 -113
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ # 2.0.6
2
+
3
+ - Update README
4
+
1
5
  # 2.0.5
2
6
 
3
7
  - Potential Calendar bugfix
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
  [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
4
4
  <!-- ALL-CONTRIBUTORS-BADGE:END -->
5
- [![npm version](https://badge.fury.io/js/react-picky-date-time.svg)](https://badge.fury.io/js/react-picky-date-time) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-picky-date-time.svg) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/edwardfxiao/react-picky-date-time/master/LICENSE)[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)[![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu)
5
+ [![npm version](https://badge.fury.io/js/react-picky-date-time.svg)](https://badge.fury.io/js/react-picky-date-time) ![Cdnjs](https://img.shields.io/cdnjs/v/react-picky-date-time) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-picky-date-time.svg) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/edwardfxiao/react-picky-date-time/master/LICENSE) [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE) [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](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 Guid(can be multiple locales)](#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
- class YourOwnComponent extends Component {
41
- constructor(props) {
42
- super(props);
43
- this.state = {
44
- showPickyDateTime: true,
45
- date: '30',
46
- month: '01',
47
- year: '2000',
48
- hour: '03',
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
- render() {
56
- const {
57
- showPickyDateTime,
58
- date,
59
- month,
60
- year,
61
- hour,
62
- minute,
63
- second,
64
- meridiem
65
- } = this.state;
66
-
67
- return(
68
- <ReactPickyDateTime
69
- size="m"// 'xs', 's', 'm', 'l'
70
- mode={0} //0: calendar only, 1: calendar and clock, 2: clock only; default is 0
71
- locale={`zh-cn`}// 'en-us' or 'zh-cn'; default is en-us
72
- show={showPickyDateTime} //default is false
73
- onClose={() => this.setState({ showPickyDateTime: false })}
74
- defaultTime={`${hour}:${minute}:${second} ${meridiem}`} // OPTIONAL. format: "HH:MM:SS AM"
75
- defaultDate={`${month}/${date}/${year}`} // OPTIONAL. format: "MM/DD/YYYY"
76
- onYearPicked={res => this.onYearPicked(res)}
77
- onMonthPicked={res => this.onMonthPicked(res)}
78
- onDatePicked={res => this.onDatePicked(res)}
79
- onResetDate={res => this.onResetDate(res)}
80
- onResetDefaultDate={res => this.onResetDefaultDate(res)}
81
- onSecondChange={res => this.onSecondChange(res)}
82
- onMinuteChange={res => this.onMinuteChange(res)}
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!&nbsp;&nbsp;⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄</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(res) {
131
+ const onYearPicked = res => {
122
132
  const { year } = res;
123
- this.setState({ year: year});
124
- }
133
+ setYear(year);
134
+ };
125
135
 
126
- onMonthPicked(res) {
136
+ const onMonthPicked = res => {
127
137
  const { month, year } = res;
128
- this.setState({ year: year, month: month});
129
- }
138
+ setMonth(month);
139
+ setYear(year);
140
+ };
130
141
 
131
- onDatePicked(res) {
142
+ const onDatePicked = res => {
132
143
  const { date, month, year } = res;
133
- this.setState({ year: year, month: month, date: date });
134
- }
144
+ setDate(date);
145
+ setMonth(month);
146
+ setYear(year);
147
+ };
135
148
 
136
- onResetDate(res) {
149
+ const onResetDate = res => {
137
150
  const { date, month, year } = res;
138
- this.setState({ year: year, month: month, date: date });
139
- }
151
+ setDate(date);
152
+ setMonth(month);
153
+ setYear(year);
154
+ };
140
155
 
141
- onResetDefaultDate(res) {
156
+ const onResetDefaultDate = res => {
142
157
  const { date, month, year } = res;
143
- this.setState({ year: year, month: month, date: date });
144
- }
145
-
146
- onSecondChange(res) {
147
- this.setState({ second: res.value });
148
- }
149
-
150
- onMinuteChange(res) {
151
- this.setState({ minute: res.value });
152
- }
153
-
154
- onHourChange(res) {
155
- this.setState({ hour: res.value });
156
- }
157
-
158
- onMeridiemChange(res) {
159
- this.setState({ meridiem: res });
160
- }
161
-
162
- onResetTime(res) {
163
- this.setState({
164
- second: res.clockHandSecond.value,
165
- minute: res.clockHandMinute.value,
166
- hour: res.clockHandHour.value
167
- });
168
- }
169
-
170
- onResetDefaultTime(res) {
171
- this.setState({
172
- second: res.clockHandSecond.value,
173
- minute: res.clockHandMinute.value,
174
- hour: res.clockHandHour.value
175
- });
176
- }
177
-
178
- onClearTime(res) {
179
- this.setState({
180
- second: res.clockHandSecond.value,
181
- minute: res.clockHandMinute.value,
182
- hour: res.clockHandHour.value
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
- this.setState({showPickyDateTime: true});
205
+ setShowPickyDateTime(true)
189
206
  }
190
207
 
191
208
  onClose() {
192
- this.setState({showPickyDateTime: false});
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-picky-date-time",
3
- "version": "2.0.5",
3
+ "version": "2.0.6",
4
4
  "description": "A react component for date time picker.",
5
5
  "main": "index.js",
6
6
  "types": "./lib/index.d.ts",