react-select-datepicker 1.1.2 → 2.0.0

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/README.md CHANGED
@@ -1,70 +1,45 @@
1
- [![NPM](https://img.shields.io/npm/v/react-select-datepicker.svg)](https://www.npmjs.com/package/react-select-datepicker)
2
- ![npm bundle size](https://img.shields.io/bundlephobia/min/react-select-datepicker)
3
- ![GitHub contributors](https://img.shields.io/github/contributors/jmcammond/react-select-datepicker)
4
- ![npm](https://img.shields.io/npm/dt/react-select-datepicker)
5
- ![NPM](https://img.shields.io/npm/l/react-select-datepicker)
6
-
7
- # react-select-datepicker
8
-
9
- A simple and reusable dropdown datepicker component for React ([Demo](https://jeffmcammond.com/react-select-datepicker/))
10
-
11
- ![Select Datepicker](https://github.com/jmcammond/react-select-datepicker/raw/master/example/assets/select-datepicker.png 'Select Datepicker')
12
-
13
- ## Install
14
-
15
- ```bash
16
- npm install --save react-select-datepicker
17
- ```
18
-
19
- ## Usage
20
-
21
- ```tsx
22
- import React, { useState, useCallback } from 'react';
23
- import SelectDatepicker from 'react-select-datepicker';
24
-
25
- export const App = () => {
26
- const [value, setValue] = useState<Date | null>();
27
-
28
- const onDateChange = useCallback((date: Date) => {
29
- setValue(date);
30
- }, []);
31
-
32
- return (
33
- <SelectDatepicker
34
- value={value}
35
- onDateChange={onDateChange}
36
- minDate={new Date(1900, 0, 1)}
37
- maxDate={new Date()}
38
- />
39
- );
40
- };
41
- ```
42
-
43
- ## Available Props
44
-
45
- | Prop | Type | Default | Options |
46
- | ----------------- | ------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
47
- | value | Date | - | - |
48
- | onDateChange | func | - | - |
49
- | minDate? | Date | - | - |
50
- | maxDate? | Date | - | - |
51
- | maxDateMessage? | string | 'Date must be less than {maxDate + 1}' | - |
52
- | minDateMessage? | string | 'Date must be greater than {minDate - 1}' | - |
53
- | invalidMessage? | string | 'Not a valid date' | - |
54
- | showLabels? | boolean | true | true, false |
55
- | showPlaceholders? | boolean | true | true, false |
56
- | showErrors? | boolean | true | true, false |
57
- | format? | string | 'month/day/year' | 'day/month/year', 'day/year/month', 'month/day/year', 'month/year/day', 'year/month/day', 'year/day/month' |
58
- | labels? | Object | English labels | { year: 'Year'; month: 'Month'; day: 'Day'; } |
59
- | monthNames? | Array | English month names | ['Jan', 'Feb', 'Mar'...] |
60
-
61
- ## Notes
62
-
63
- #### Year Select Field
64
-
65
- If no minDate is provided than the minium year that can be selected is 1900
66
- If no maxDate is provided than the maxium year that can be selected is the current
67
-
68
- ## License
69
-
70
- MIT © [JMcAmmond](https://github.com/JMcAmmond)
1
+ # react-select-datepicker
2
+
3
+ A simple and reusable dropdown datepicker component for React ([Demo](https://jeffmcammond.com/react-select-datepicker/))
4
+
5
+ [![NPM](https://img.shields.io/npm/v/react-select-datepicker.svg)](https://www.npmjs.com/package/react-select-datepicker)
6
+ ![npm bundle size](https://img.shields.io/bundlephobia/min/react-select-datepicker)
7
+ ![GitHub contributors](https://img.shields.io/github/contributors/jmcammond/react-select-datepicker)
8
+ ![npm](https://img.shields.io/npm/dt/react-select-datepicker)
9
+ ![NPM](https://img.shields.io/npm/l/react-select-datepicker)
10
+
11
+ ![Select Datepicker](https://github.com/jmcammond/react-select-datepicker/raw/master/example/assets/select-datepicker.png 'Select Datepicker')
12
+
13
+ ## Install
14
+
15
+ ```bash
16
+ npm install --save react-select-datepicker
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ ```tsx
22
+ import React, { useState, useCallback } from 'react';
23
+ import { SelectDatepicker } from 'react-select-datepicker';
24
+
25
+ export const App = () => {
26
+ const [value, setValue] = useState<Date | null>();
27
+
28
+ const onDateChange = useCallback((date: Date) => {
29
+ setValue(date);
30
+ }, []);
31
+
32
+ return (
33
+ <SelectDatepicker
34
+ value={value}
35
+ onDateChange={onDateChange}
36
+ minDate={new Date(1900, 0, 1)}
37
+ maxDate={new Date()}
38
+ />
39
+ );
40
+ };
41
+ ```
42
+
43
+ ## License
44
+
45
+ MIT © [JMcAmmond](https://github.com/JMcAmmond)
@@ -0,0 +1,15 @@
1
+ /*! *****************************************************************************
2
+ Copyright (c) Microsoft Corporation.
3
+
4
+ Permission to use, copy, modify, and/or distribute this software for any
5
+ purpose with or without fee is hereby granted.
6
+
7
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
8
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
9
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
10
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
11
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
12
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
13
+ PERFORMANCE OF THIS SOFTWARE.
14
+ ***************************************************************************** */
15
+ var r=function(){return r=Object.assign||function(r){for(var t,e=1,n=arguments.length;e<n;e++)for(var o in t=arguments[e])Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o]);return r},r.apply(this,arguments)};function t(r,t){var e={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&t.indexOf(n)<0&&(e[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(e[n[o]]=r[n[o]])}return e}export{r as __assign,t as __rest};
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ interface IOptionsRenderer {
3
+ options: {
4
+ value: number;
5
+ label: string;
6
+ }[];
7
+ }
8
+ export declare const OptionsRenderer: ({ options }: IOptionsRenderer) => JSX.Element;
9
+ export {};
@@ -0,0 +1 @@
1
+ import e,{useMemo as t}from"react";var n=function(n){var r=n.options,a=t((function(){return r.map((function(t,n){return e.createElement("option",{key:t.value,value:t.value},t.label)}))}),[r]);return e.createElement(e.Fragment,null,a)};export{n as OptionsRenderer};
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { ISelectDatepicker } from '../interfaces/ISelectDatePicker';
3
+ declare const SelectDatepicker: ({ id, className, minDate, maxDate, selectedDate, onDateChange, disabled, hasError, monthRef, yearRef, dayRef, options, ...args }: ISelectDatepicker) => JSX.Element;
4
+ export { SelectDatepicker };
@@ -0,0 +1 @@
1
+ import{__rest as e,__assign as l}from"../_virtual/_tslib.js";import a,{useState as o,useMemo as n,useCallback as t,useEffect as r}from"react";import{getYearsObject as i,getMonthsObject as d,getDaysObject as s}from"../utils/helpers.js";import{OptionsRenderer as u}from"./OptionsRenderer.js";import{SelectRenderer as c}from"./SelectRenderer.js";var v=function(v){var m,b,h,f,p,y,g,L=v.id,D=v.className,N=v.minDate,w=v.maxDate,E=v.selectedDate,R=v.onDateChange,P=v.disabled,j=void 0!==P&&P,C=v.hasError,Y=void 0!==C&&C,x=v.monthRef,O=v.yearRef,S=v.dayRef,H=v.options,M=void 0===H?{}:H,k=e(v,["id","className","minDate","maxDate","selectedDate","onDateChange","disabled","hasError","monthRef","yearRef","dayRef","options"]),F=o(-1),_=F[0],q=F[1],z=o(-1),A=z[0],B=z[1],G=o(-1),I=G[0],J=G[1],K=n((function(){return M.order?M.order.split("/"):["month","day","year"]}),[M.order]),Q=n((function(){return["sdp-select-datepicker",D].join(" ")}),[D]),T=n((function(){return a.createElement(u,{options:i(N,w,M.reverseYears)})}),[w,M.reverseYears,N]),U=n((function(){var e;return a.createElement(u,{options:d(N,w,_,null===(e=M.labels)||void 0===e?void 0:e.months)})}),[w,null===(m=M.labels)||void 0===m?void 0:m.months,N,_]),V=n((function(){return a.createElement(u,{options:s(N,w,A,_)})}),[w,A,N,_]),W=t((function(e){q(Number(e.target.value)),d(N,w,Number(e.target.value)).some((function(e){return e.value===A}))||B(-1),s(N,w,A,Number(e.target.value)).some((function(e){return e.value===I}))||J(-1)}),[I,A,N,w]),X=t((function(e){B(Number(e.target.value)),s(N,w,Number(e.target.value),_).some((function(e){return e.value===I}))||J(-1)}),[I,_,N,w]),Z=t((function(e){J(Number(e.target.value))}),[]),$=n((function(){var e,l,o,n,t,r;return{day:a.createElement(c,{id:"day",labels:{show:void 0===M.showLabels||M.showLabels,main:(null===(e=M.labels)||void 0===e?void 0:e.dayLabel)||"Day",placeholder:(null===(l=M.labels)||void 0===l?void 0:l.dayPlaceholder)||"Select Day"},value:I,disabled:j,onChangeHandler:Z,selectOptions:V,ref:S}),month:a.createElement(c,{id:"month",labels:{show:void 0===M.showLabels||M.showLabels,main:(null===(o=M.labels)||void 0===o?void 0:o.monthLabel)||"Month",placeholder:(null===(n=M.labels)||void 0===n?void 0:n.monthPlaceholder)||"Select Month"},value:A,disabled:j,onChangeHandler:X,selectOptions:U,ref:x}),year:a.createElement(c,{id:"year",labels:{show:void 0===M.showLabels||M.showLabels,main:(null===(t=M.labels)||void 0===t?void 0:t.yearLabel)||"Year",placeholder:(null===(r=M.labels)||void 0===r?void 0:r.yearPlaceholder)||"Select Year"},value:_,disabled:j,onChangeHandler:W,selectOptions:T,ref:O})}}),[I,V,S,j,Z,X,W,A,U,x,null===(b=M.labels)||void 0===b?void 0:b.dayLabel,null===(h=M.labels)||void 0===h?void 0:h.dayPlaceholder,null===(f=M.labels)||void 0===f?void 0:f.monthLabel,null===(p=M.labels)||void 0===p?void 0:p.monthPlaceholder,null===(y=M.labels)||void 0===y?void 0:y.yearLabel,null===(g=M.labels)||void 0===g?void 0:g.yearPlaceholder,M.showLabels,_,T,O]);return r((function(){null!=E&&(J(Number(E.getDate())),B(Number(E.getMonth()+1)),q(Number(E.getFullYear())))}),[E]),r((function(){R(-1!==_&&-1!==A&&-1!==I?new Date("".concat(A,"/").concat(I,"/").concat(_)):null)}),[I,A,_]),a.createElement("div",l({},k,{style:{display:"flex"},id:L,className:Q},Y?{"aria-invalid":!0}:null),K.map((function(e,l){return a.createElement(a.Fragment,{key:"".concat(e,"-").concat(l)},$[e])})))};export{v as SelectDatepicker};
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ interface ISelectRenderer {
3
+ id: string;
4
+ labels: {
5
+ show?: boolean;
6
+ main?: string;
7
+ placeholder?: string;
8
+ };
9
+ value: number;
10
+ disabled?: boolean;
11
+ onChangeHandler: (e: React.ChangeEvent<HTMLSelectElement>) => void;
12
+ selectOptions: JSX.Element;
13
+ ref?: React.LegacyRef<HTMLSelectElement>;
14
+ }
15
+ export declare const SelectRenderer: ({ id, labels, value, disabled, onChangeHandler, selectOptions, ref, }: ISelectRenderer) => JSX.Element;
16
+ export {};
@@ -0,0 +1 @@
1
+ import e from"react";var l=function(l){var a=l.id,t=l.labels,n=l.value,c=l.disabled,r=l.onChangeHandler,s=l.selectOptions,o=l.ref;return e.createElement("div",{style:{display:"flex",flexDirection:"column"},className:"sdp_select-container-".concat(a)},t.show&&e.createElement("label",{htmlFor:a},t.main),e.createElement("select",{id:a,value:n,disabled:c,onChange:r,ref:o,className:"spd_select-".concat(a)},e.createElement("option",{value:-1,disabled:!0},t.placeholder),s))};export{l as SelectRenderer};
package/dist/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import React from 'react';
2
- import { ISelectDatePicker } from './interfaces';
3
- declare const SelectDatepicker: React.FC<ISelectDatePicker>;
4
- export default SelectDatepicker;
1
+ export { SelectDatepicker } from './components/SelectDatepicker';
2
+ export { ISelectDatepicker } from './interfaces/ISelectDatePicker';
3
+ export { SelectDatepickerOptions } from './types/SelectDatepickerOptions';
package/dist/index.js CHANGED
@@ -1,304 +1 @@
1
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
2
-
3
- var React = require('react');
4
- var React__default = _interopDefault(React);
5
-
6
- function _extends() {
7
- _extends = Object.assign || function (target) {
8
- for (var i = 1; i < arguments.length; i++) {
9
- var source = arguments[i];
10
-
11
- for (var key in source) {
12
- if (Object.prototype.hasOwnProperty.call(source, key)) {
13
- target[key] = source[key];
14
- }
15
- }
16
- }
17
-
18
- return target;
19
- };
20
-
21
- return _extends.apply(this, arguments);
22
- }
23
-
24
- var buildDateFromInput = function buildDateFromInput(day, month, year) {
25
- var date = new Date(Number(year), Number(month) - 1, Number(day));
26
- return date;
27
- };
28
-
29
- var isValidDateObject = function isValidDateObject(date, day, month, year) {
30
- var isDate = Object.prototype.toString.call(date) === '[object Date]';
31
- var dayMatch = date.getDate() === Number(day);
32
- var monthMatch = date.getMonth() === Number(month) - 1;
33
- var yearMatch = date.getFullYear() === Number(year);
34
- return isDate && dayMatch && monthMatch && yearMatch;
35
- };
36
-
37
- var isValidDate = function isValidDate(day, month, year, props) {
38
- var userDate = buildDateFromInput(day, month, year);
39
-
40
- if (!isValidDateObject(userDate, day, month, year)) {
41
- return props.invalidMessage || 'Not a valid date';
42
- }
43
-
44
- if (props.maxDate) {
45
- var maxDate = props.maxDate;
46
-
47
- if (userDate > maxDate) {
48
- var maxDatePlusOne = new Date(maxDate);
49
- maxDatePlusOne.setDate(maxDatePlusOne.getDate() + 1);
50
- return props.maxDateMessage || "Date must be less than " + maxDatePlusOne.toDateString().substring(3);
51
- }
52
- }
53
-
54
- if (props.minDate) {
55
- var minDate = props.minDate;
56
-
57
- if (userDate < minDate) {
58
- var minDateMinusOne = new Date(minDate);
59
- minDateMinusOne.setDate(minDateMinusOne.getDate() - 1);
60
- return props.minDateMessage || "Date must be greater than " + minDateMinusOne.toDateString().substring(3);
61
- }
62
- }
63
-
64
- return '';
65
- };
66
-
67
- var MONTHMAP = {
68
- 1: 'January',
69
- 2: 'February',
70
- 3: 'March',
71
- 4: 'April',
72
- 5: 'May',
73
- 6: 'June',
74
- 7: 'July',
75
- 8: 'August',
76
- 9: 'September',
77
- 10: 'October',
78
- 11: 'November',
79
- 12: 'December'
80
- };
81
-
82
- var getDays = function getDays(showPlaceholder, dayLabel) {
83
- var days = [];
84
- days.push(React__default.createElement("option", {
85
- value: "",
86
- disabled: true
87
- }, showPlaceholder ? dayLabel || 'Day' : ''));
88
-
89
- for (var i = 1; i <= 31; i += 1) {
90
- days.push(React__default.createElement("option", {
91
- value: "" + i
92
- }, i));
93
- }
94
-
95
- return days;
96
- };
97
-
98
- var getMonths = function getMonths(showPlaceholder, monthLabel, monthNames) {
99
- var months = [];
100
- months.push(React__default.createElement("option", {
101
- value: "",
102
- disabled: true
103
- }, showPlaceholder ? monthLabel || 'Month' : ''));
104
-
105
- for (var i = 1; i <= 12; i += 1) {
106
- months.push(React__default.createElement("option", {
107
- value: "" + i
108
- }, monthNames ? monthNames[i - 1] : MONTHMAP[i]));
109
- }
110
-
111
- return months;
112
- };
113
-
114
- var getYears = function getYears(max, min, showPlaceholder, value, yearLabel) {
115
- var years = [];
116
- var maxYear;
117
- var minYear;
118
-
119
- if (max !== undefined) {
120
- maxYear = max.getFullYear();
121
- } else {
122
- maxYear = new Date().getFullYear();
123
- }
124
-
125
- if (min !== undefined) {
126
- minYear = min.getFullYear();
127
- } else {
128
- minYear = 1900;
129
- }
130
-
131
- if (value) {
132
- if (Number(value) > maxYear) {
133
- maxYear = Number(value);
134
- }
135
-
136
- if (Number(value) < minYear) {
137
- minYear = Number(value);
138
- }
139
- }
140
-
141
- years.push(React__default.createElement("option", {
142
- value: "",
143
- disabled: true
144
- }, showPlaceholder ? yearLabel || 'Year' : ''));
145
-
146
- for (var i = maxYear; i >= minYear; i -= 1) {
147
- years.push(React__default.createElement("option", {
148
- value: "" + i
149
- }, i));
150
- }
151
-
152
- return years;
153
- };
154
-
155
- var spreadDateToObject = function spreadDateToObject(dateValue) {
156
- return {
157
- day: dateValue ? "" + dateValue.getDate() : '',
158
- month: dateValue ? "" + (dateValue.getMonth() + 1) : '',
159
- year: dateValue ? "" + dateValue.getFullYear() : ''
160
- };
161
- };
162
-
163
- var flex = {
164
- display: 'flex'
165
- };
166
- var flexColumn = {
167
- display: 'flex',
168
- flexDirection: 'column'
169
- };
170
-
171
- var SelectDatepicker = function SelectDatepicker(props) {
172
- var _useState = React.useState(true),
173
- isDirty = _useState[0],
174
- setIsDirty = _useState[1];
175
-
176
- var _useState2 = React.useState(false),
177
- hasError = _useState2[0],
178
- setHasError = _useState2[1];
179
-
180
- var _useState3 = React.useState(),
181
- error = _useState3[0],
182
- setError = _useState3[1];
183
-
184
- var _useState4 = React.useState(spreadDateToObject(props.value)),
185
- date = _useState4[0],
186
- setDate = _useState4[1];
187
-
188
- var orderArray = React.useMemo(function () {
189
- return props.format.split('/');
190
- }, [props.format]);
191
- var onDateChange = React.useCallback(function (newDate) {
192
- props.onDateChange(newDate);
193
- }, [props]);
194
- var validDateChange = React.useCallback(function () {
195
- var newDate = buildDateFromInput(date.day, date.month, date.year);
196
- onDateChange(newDate);
197
- }, [date.day, date.month, date.year, onDateChange]);
198
- var renderError = React.useCallback(function (err, hasErr) {
199
- setError(err);
200
- setHasError(hasErr);
201
- onDateChange(null);
202
- }, [onDateChange]);
203
- var validate = React.useCallback(function () {
204
- var day = date.day,
205
- month = date.month,
206
- year = date.year;
207
-
208
- if (!day || !month || !year) {
209
- onDateChange(null);
210
- return;
211
- }
212
-
213
- var errorString = isValidDate(day, month, year, props);
214
-
215
- if (errorString !== '') {
216
- renderError(errorString, true);
217
- return;
218
- }
219
-
220
- validDateChange();
221
- }, [date, onDateChange, props, renderError, validDateChange]);
222
- var onInputChange = React.useCallback(function (e) {
223
- var _extends2;
224
-
225
- setDate(_extends({}, date, (_extends2 = {}, _extends2[e.target.name] = e.target.value, _extends2)));
226
- setIsDirty(true);
227
- }, [date]);
228
- var inputField = React.useCallback(function (id, label, value, options) {
229
- var className = "rsd_" + id + "-container";
230
- return React__default.createElement("div", {
231
- className: "" + className,
232
- style: flexColumn
233
- }, props.showLabels ? React__default.createElement("label", {
234
- htmlFor: id
235
- }, label) : null, React__default.createElement("select", {
236
- className: "" + (hasError ? 'has-error' : ''),
237
- id: id,
238
- name: id,
239
- value: value,
240
- onChange: onInputChange
241
- }, options.map(function (option, i) {
242
- return React__default.createElement(React__default.Fragment, {
243
- key: option + "-" + i
244
- }, option);
245
- })));
246
- }, [hasError, onInputChange, props.showLabels]);
247
- var dateField = React.useMemo(function () {
248
- var showPlaceholders = props.showPlaceholders,
249
- monthNames = props.monthNames,
250
- maxDate = props.maxDate,
251
- minDate = props.minDate,
252
- labels = props.labels;
253
- var dayLabel = labels && labels.day || 'Day';
254
- var monthLabel = labels && labels.month || 'Month';
255
- var yearLabel = labels && labels.year || 'Year';
256
- var fields = {
257
- day: inputField('day', dayLabel, date.day, getDays(showPlaceholders, dayLabel)),
258
- month: inputField('month', monthLabel, date.month, getMonths(showPlaceholders, monthLabel, monthNames)),
259
- year: inputField('year', yearLabel, date.year, getYears(maxDate, minDate, showPlaceholders, date.year, yearLabel))
260
- };
261
- return fields;
262
- }, [date.day, date.month, date.year, inputField, props]);
263
- React.useEffect(function () {
264
- if (isDirty) {
265
- setError('');
266
- setHasError(false);
267
- validate();
268
- setIsDirty(false);
269
- }
270
- }, [isDirty]);
271
- React.useEffect(function () {
272
- var value = props.value;
273
- var day = date.day,
274
- month = date.month,
275
- year = date.year;
276
-
277
- if (value !== null && value !== buildDateFromInput(day, month, year)) {
278
- setDate(spreadDateToObject(value));
279
- }
280
- }, [props]);
281
- return React__default.createElement("div", {
282
- className: "rsd " + props.className
283
- }, React__default.createElement("div", {
284
- className: "rsd_date-container",
285
- style: flex
286
- }, orderArray.map(function (key, i) {
287
- return React__default.createElement(React__default.Fragment, {
288
- key: key + "-" + i
289
- }, dateField[key]);
290
- })), props.showErrors && hasError && React__default.createElement("div", {
291
- className: "error-message"
292
- }, error));
293
- };
294
- SelectDatepicker.defaultProps = {
295
- value: null,
296
- showLabels: true,
297
- showPlaceholders: true,
298
- showErrors: true,
299
- format: 'month/day/year',
300
- className: ''
301
- };
302
-
303
- module.exports = SelectDatepicker;
304
- //# sourceMappingURL=index.js.map
1
+ export{SelectDatepicker}from"./components/SelectDatepicker.js";
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ import { SelectDatepickerOptions } from '../types/SelectDatepickerOptions';
3
+ export interface ISelectDatepicker {
4
+ id?: string;
5
+ className?: string;
6
+ minDate?: Date;
7
+ maxDate?: Date;
8
+ selectedDate?: Date | null;
9
+ onDateChange: (date: Date | null) => void;
10
+ options?: SelectDatepickerOptions;
11
+ disabled?: boolean;
12
+ hasError?: boolean;
13
+ monthRef?: React.LegacyRef<HTMLSelectElement>;
14
+ yearRef?: React.LegacyRef<HTMLSelectElement>;
15
+ dayRef?: React.LegacyRef<HTMLSelectElement>;
16
+ }
@@ -0,0 +1,28 @@
1
+ export declare type Months = {
2
+ 1: string;
3
+ 2: string;
4
+ 3: string;
5
+ 4: string;
6
+ 5: string;
7
+ 6: string;
8
+ 7: string;
9
+ 8: string;
10
+ 9: string;
11
+ 10: string;
12
+ 11: string;
13
+ 12: string;
14
+ };
15
+ export declare type SelectDatepickerOptions = {
16
+ labels?: {
17
+ yearLabel?: string;
18
+ monthLabel?: string;
19
+ dayLabel?: string;
20
+ yearPlaceholder?: string;
21
+ monthPlaceholder?: string;
22
+ dayPlaceholder?: string;
23
+ months?: Months;
24
+ };
25
+ reverseYears?: boolean;
26
+ showLabels?: boolean;
27
+ order?: 'day/month/year' | 'day/year/month' | 'month/day/year' | 'month/year/day' | 'year/month/day' | 'year/day/month';
28
+ };
@@ -0,0 +1,18 @@
1
+ import { Months } from '../types/SelectDatepickerOptions';
2
+ export declare const range: (start: number, stop: number, step: number) => number[];
3
+ export declare const getAllDaysInMonth: (year: number, month: number) => number[];
4
+ export declare const englishMonths: Months;
5
+ export declare const getYearsObject: (start?: Date | undefined, end?: Date | undefined, reverse?: boolean) => {
6
+ value: number;
7
+ label: string;
8
+ }[];
9
+ export declare const getMonthsObject: (start?: Date | undefined, end?: Date | undefined, selectedYear?: number, months?: {
10
+ [key: string]: string;
11
+ }) => {
12
+ value: number;
13
+ label: string;
14
+ }[];
15
+ export declare const getDaysObject: (start?: Date | undefined, end?: Date | undefined, selectedMonth?: number, selectedYear?: number) => {
16
+ value: number;
17
+ label: string;
18
+ }[];
@@ -0,0 +1 @@
1
+ var e=function(e,t,r){return Array.from({length:(t-e)/r+1},(function(t,n){return e+n*r}))},t=function(e,t){for(var r=new Date("".concat(e,"/").concat(t,"/01")),n=[];r.getMonth()+1===t;)n.push(new Date(r).getDate()),r.setDate(r.getDate()+1);return n},r={1:"January",2:"February",3:"March",4:"April",5:"May",6:"June",7:"July",8:"August",9:"September",10:"October",11:"November",12:"December"},n=function(t,r,n){void 0===n&&(n=!0);var a=e(t?t.getFullYear():1900,r?r.getFullYear():(new Date).getFullYear(),1);return n&&(a=a.reverse()),a.map((function(e,t){return{value:e,label:"".concat(e)}}))},a=function(t,n,a,u){void 0===a&&(a=-1),void 0===u&&(u=r);var l=e(1,12,1);if(n&&-1!==a&&a===n.getFullYear()){var o=n.getMonth()+1;l=l.slice(0,o)}if(t&&-1!==a&&a===t.getFullYear()){var c=t.getMonth()+1;l=l.slice(c-1,l.length)}return l.map((function(e,t){return{value:e,label:u[e]}}))},u=function(r,n,a,u){void 0===a&&(a=-1),void 0===u&&(u=-1);var l=[];if(-1===a)return(l=e(1,31,1)).map((function(e,t){return{value:e,label:"".concat(e)}}));if(l=t(-1===u?1900:u,a),n&&u===n.getFullYear()&&a===n.getMonth()+1){var o=n.getDate();l=l.slice(0,o)}if(r&&u===r.getFullYear()&&a===r.getMonth()+1){var c=r.getDate();l=l.slice(c-1,l.length)}return l.map((function(e,t){return{value:e,label:"".concat(e)}}))};export{r as englishMonths,t as getAllDaysInMonth,u as getDaysObject,a as getMonthsObject,n as getYearsObject,e as range};