envoc-form 4.2.0 → 4.4.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.
Files changed (12) hide show
  1. package/README.md +1 -1
  2. package/es/DatePicker/DatePickerGroup.js +4 -1
  3. package/es/DateTimePicker/DateTimePickerGroup.d.ts +1 -1
  4. package/es/DateTimePicker/DateTimePickerGroup.js +6 -3
  5. package/lib/DatePicker/DatePickerGroup.js +4 -1
  6. package/lib/DateTimePicker/DateTimePickerGroup.d.ts +1 -1
  7. package/lib/DateTimePicker/DateTimePickerGroup.js +6 -3
  8. package/package.json +2 -2
  9. package/src/DatePicker/DatePickerGroup.tsx +19 -11
  10. package/src/DatePicker/__snapshots__/DatePicker.test.tsx.snap +119 -117
  11. package/src/DateTimePicker/DateTimePickerGroup.tsx +21 -9
  12. package/src/DateTimePicker/__snapshots__/DateTimePicker.test.tsx.snap +180 -178
package/README.md CHANGED
@@ -8809,7 +8809,7 @@ ___
8809
8809
 
8810
8810
  #### Defined in
8811
8811
 
8812
- packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:110
8812
+ packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:118
8813
8813
 
8814
8814
  ___
8815
8815
 
package/es/DatePicker/DatePickerGroup.js CHANGED
@@ -48,7 +48,10 @@ export default function DatePickerGroup(_a) {
48
48
  }
49
49
  }
50
50
  }, [setDisplayDate, input.value]);
51
- return (_jsx(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled }, { children: _jsx(DatePicker, __assign({}, rest, { className: classnames(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange, maxDate: maxDate, minDate: minDate })) })));
51
+ return (_jsx(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled }, { children: _jsx("div", __assign({ onBlur: function () {
52
+ // Manually trigger Formik's onBlur when the user clicks away from the date picker
53
+ input.onBlur();
54
+ } }, { children: _jsx(DatePicker, __assign({}, rest, { className: classnames(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange, disabled: disabled, required: required, maxDate: maxDate, minDate: minDate })) })) })));
52
55
  function handleChange(e) {
53
56
  var onChange = input.onChange;
54
57
  if (onChange === null) {
package/es/DateTimePicker/DateTimePickerGroup.d.ts CHANGED
@@ -10,4 +10,4 @@ export interface DateTimePickerGroupProps<T> extends InjectedFieldProps<T | unde
10
10
  *
11
11
  * Uses [react-datetime-picker](https://www.npmjs.com/package/react-datetime-picker)
12
12
  */
13
- export default function DateTimePickerGroup<T>({ input, meta, label, helpText, className, required, disabled, convert, ...rest }: DateTimePickerGroupProps<T>): JSX.Element;
13
+ export default function DateTimePickerGroup<T>({ input, meta, label, helpText, className, required, disabled, convert, maxDate, minDate, ...rest }: DateTimePickerGroupProps<T>): JSX.Element;
package/es/DateTimePicker/DateTimePickerGroup.js CHANGED
@@ -33,8 +33,8 @@ import Group from '../Group';
33
33
  * Uses [react-datetime-picker](https://www.npmjs.com/package/react-datetime-picker)
34
34
  */
35
35
  export default function DateTimePickerGroup(_a) {
36
- var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, convert = _a.convert, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "convert"]);
37
- var _b = useState(null), displayDateTime = _b[0], setDisplayDateTime = _b[1];
36
+ var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, convert = _a.convert, _b = _a.maxDate, maxDate = _b === void 0 ? new Date(9999, 11, 31) : _b, _c = _a.minDate, minDate = _c === void 0 ? new Date(1000, 0, 1) : _c, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "convert", "maxDate", "minDate"]);
37
+ var _d = useState(null), displayDateTime = _d[0], setDisplayDateTime = _d[1];
38
38
  useEffect(function () {
39
39
  var inputValue = input.value;
40
40
  if (!inputValue) {
@@ -48,7 +48,10 @@ export default function DateTimePickerGroup(_a) {
48
48
  setDisplayDateTime(inputValue);
49
49
  }
50
50
  }, [setDisplayDateTime, input.value]);
51
- return (_jsx(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, FormDefaults.cssClassPrefix + 'date-time-picker'), required: required, disabled: disabled }, { children: _jsx(DateTimePicker, __assign({}, rest, { className: classnames(FormDefaults.cssClassPrefix + 'date-time-picker', className), value: displayDateTime, onChange: handleChange })) })));
51
+ return (_jsx(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, FormDefaults.cssClassPrefix + 'date-time-picker'), required: required, disabled: disabled }, { children: _jsx("div", __assign({ onBlur: function () {
52
+ // Manually trigger Formik's onBlur when the user clicks away from the date picker
53
+ input.onBlur();
54
+ } }, { children: _jsx(DateTimePicker, __assign({}, rest, { className: classnames(FormDefaults.cssClassPrefix + 'date-time-picker', className), value: displayDateTime, onChange: handleChange, required: required, disabled: disabled, maxDate: maxDate, minDate: minDate })) })) })));
52
55
  function handleChange(newDateTime) {
53
56
  var onChange = input.onChange;
54
57
  if (onChange === null) {
package/lib/DatePicker/DatePickerGroup.js CHANGED
@@ -54,7 +54,10 @@ function DatePickerGroup(_a) {
54
54
  }
55
55
  }
56
56
  }, [setDisplayDate, input.value]);
57
- return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(entry_nostyle_1.default, __assign({}, rest, { className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange, maxDate: maxDate, minDate: minDate })) })));
57
+ return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onBlur: function () {
58
+ // Manually trigger Formik's onBlur when the user clicks away from the date picker
59
+ input.onBlur();
60
+ } }, { children: (0, jsx_runtime_1.jsx)(entry_nostyle_1.default, __assign({}, rest, { className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange, disabled: disabled, required: required, maxDate: maxDate, minDate: minDate })) })) })));
58
61
  function handleChange(e) {
59
62
  var onChange = input.onChange;
60
63
  if (onChange === null) {
package/lib/DateTimePicker/DateTimePickerGroup.d.ts CHANGED
@@ -10,4 +10,4 @@ export interface DateTimePickerGroupProps<T> extends InjectedFieldProps<T | unde
10
10
  *
11
11
  * Uses [react-datetime-picker](https://www.npmjs.com/package/react-datetime-picker)
12
12
  */
13
- export default function DateTimePickerGroup<T>({ input, meta, label, helpText, className, required, disabled, convert, ...rest }: DateTimePickerGroupProps<T>): JSX.Element;
13
+ export default function DateTimePickerGroup<T>({ input, meta, label, helpText, className, required, disabled, convert, maxDate, minDate, ...rest }: DateTimePickerGroupProps<T>): JSX.Element;
package/lib/DateTimePicker/DateTimePickerGroup.js CHANGED
@@ -38,8 +38,8 @@ var Group_1 = __importDefault(require("../Group"));
38
38
  * Uses [react-datetime-picker](https://www.npmjs.com/package/react-datetime-picker)
39
39
  */
40
40
  function DateTimePickerGroup(_a) {
41
- var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, convert = _a.convert, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "convert"]);
42
- var _b = (0, react_1.useState)(null), displayDateTime = _b[0], setDisplayDateTime = _b[1];
41
+ var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, convert = _a.convert, _b = _a.maxDate, maxDate = _b === void 0 ? new Date(9999, 11, 31) : _b, _c = _a.minDate, minDate = _c === void 0 ? new Date(1000, 0, 1) : _c, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "convert", "maxDate", "minDate"]);
42
+ var _d = (0, react_1.useState)(null), displayDateTime = _d[0], setDisplayDateTime = _d[1];
43
43
  (0, react_1.useEffect)(function () {
44
44
  var inputValue = input.value;
45
45
  if (!inputValue) {
@@ -53,7 +53,10 @@ function DateTimePickerGroup(_a) {
53
53
  setDisplayDateTime(inputValue);
54
54
  }
55
55
  }, [setDisplayDateTime, input.value]);
56
- return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-time-picker'), required: required, disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(react_datetime_picker_1.DateTimePicker, __assign({}, rest, { className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-time-picker', className), value: displayDateTime, onChange: handleChange })) })));
56
+ return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-time-picker'), required: required, disabled: disabled }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onBlur: function () {
57
+ // Manually trigger Formik's onBlur when the user clicks away from the date picker
58
+ input.onBlur();
59
+ } }, { children: (0, jsx_runtime_1.jsx)(react_datetime_picker_1.DateTimePicker, __assign({}, rest, { className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-time-picker', className), value: displayDateTime, onChange: handleChange, required: required, disabled: disabled, maxDate: maxDate, minDate: minDate })) })) })));
57
60
  function handleChange(newDateTime) {
58
61
  var onChange = input.onChange;
59
62
  if (onChange === null) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "envoc-form",
3
- "version": "4.2.0",
3
+ "version": "4.4.0",
4
4
  "description": "Envoc form components",
5
5
  "keywords": [
6
6
  "react-component",
@@ -38,7 +38,7 @@
38
38
  "axios": "^0.21.1",
39
39
  "classnames": "^2.3.1",
40
40
  "date-fns": "^2.22.1",
41
- "envoc-request": "^4.2.0",
41
+ "envoc-request": "^4.4.0",
42
42
  "lru-cache": "^6.0.0",
43
43
  "prop-types": "^15.7.2",
44
44
  "react-date-picker": "^8.2.0",
package/src/DatePicker/DatePickerGroup.tsx CHANGED
@@ -62,17 +62,25 @@ export default function DatePickerGroup<T>({
62
62
  )}
63
63
  required={required}
64
64
  disabled={disabled}>
65
- <DatePicker
66
- {...rest}
67
- className={classnames(
68
- FormDefaults.cssClassPrefix + 'date-picker',
69
- className
70
- )}
71
- value={displayDate}
72
- onChange={handleChange}
73
- maxDate={maxDate}
74
- minDate={minDate}
75
- />
65
+ <div
66
+ onBlur={() => {
67
+ // Manually trigger Formik's onBlur when the user clicks away from the date picker
68
+ input.onBlur();
69
+ }}>
70
+ <DatePicker
71
+ {...rest}
72
+ className={classnames(
73
+ FormDefaults.cssClassPrefix + 'date-picker',
74
+ className
75
+ )}
76
+ value={displayDate}
77
+ onChange={handleChange}
78
+ disabled={disabled}
79
+ required={required}
80
+ maxDate={maxDate}
81
+ minDate={minDate}
82
+ />
83
+ </div>
76
84
  </Group>
77
85
  );
78
86
 
package/src/DatePicker/__snapshots__/DatePicker.test.tsx.snap CHANGED
@@ -18,132 +18,134 @@ exports[`IconInputGroup has matching snapshot 1`] = `
18
18
  >
19
19
  Favorite Date
20
20
  </label>
21
- <div
22
- class="react-date-picker react-date-picker--closed react-date-picker--enabled envoc-form-date-picker"
23
- >
21
+ <div>
24
22
  <div
25
- class="react-date-picker__wrapper"
23
+ class="react-date-picker react-date-picker--closed react-date-picker--enabled envoc-form-date-picker"
26
24
  >
27
25
  <div
28
- class="react-date-picker__inputGroup"
29
- >
30
- <input
31
- max="2023-09-23"
32
- min="2022-06-22"
33
- name="date"
34
- style="visibility: hidden; position: absolute; z-index: -999;"
35
- type="date"
36
- value=""
37
- />
38
- <input
39
- autocomplete="off"
40
- class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
41
- data-input="true"
42
- inputmode="numeric"
43
- max="12"
44
- min="1"
45
- name="month"
46
- placeholder="mm"
47
- type="number"
48
- value=""
49
- />
50
- <span
51
- class="react-date-picker__inputGroup__divider"
52
- >
53
- /
54
- </span>
55
- <input
56
- autocomplete="off"
57
- class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
58
- data-input="true"
59
- inputmode="numeric"
60
- max="31"
61
- min="1"
62
- name="day"
63
- placeholder="dd"
64
- type="number"
65
- value=""
66
- />
67
- <span
68
- class="react-date-picker__inputGroup__divider"
69
- >
70
- /
71
- </span>
72
- <input
73
- autocomplete="off"
74
- class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
75
- data-input="true"
76
- inputmode="numeric"
77
- max="2023"
78
- min="2022"
79
- name="year"
80
- placeholder="yyyy"
81
- step="1"
82
- type="number"
83
- value=""
84
- />
85
- </div>
86
- <button
87
- class="react-date-picker__clear-button react-date-picker__button"
88
- type="button"
26
+ class="react-date-picker__wrapper"
89
27
  >
90
- <svg
91
- class="react-date-picker__clear-button__icon react-date-picker__button__icon"
92
- height="19"
93
- stroke="black"
94
- stroke-width="2"
95
- viewBox="0 0 19 19"
96
- width="19"
97
- xmlns="http://www.w3.org/2000/svg"
28
+ <div
29
+ class="react-date-picker__inputGroup"
98
30
  >
99
- <line
100
- x1="4"
101
- x2="15"
102
- y1="4"
103
- y2="15"
31
+ <input
32
+ max="2023-09-23"
33
+ min="2022-06-22"
34
+ name="date"
35
+ style="visibility: hidden; position: absolute; z-index: -999;"
36
+ type="date"
37
+ value=""
104
38
  />
105
- <line
106
- x1="15"
107
- x2="4"
108
- y1="4"
109
- y2="15"
39
+ <input
40
+ autocomplete="off"
41
+ class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
42
+ data-input="true"
43
+ inputmode="numeric"
44
+ max="12"
45
+ min="1"
46
+ name="month"
47
+ placeholder="mm"
48
+ type="number"
49
+ value=""
110
50
  />
111
- </svg>
112
- </button>
113
- <button
114
- class="react-date-picker__calendar-button react-date-picker__button"
115
- type="button"
116
- >
117
- <svg
118
- class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
119
- height="19"
120
- stroke="black"
121
- stroke-width="2"
122
- viewBox="0 0 19 19"
123
- width="19"
124
- xmlns="http://www.w3.org/2000/svg"
125
- >
126
- <rect
127
- fill="none"
128
- height="15"
129
- width="15"
130
- x="2"
131
- y="2"
132
- />
133
- <line
134
- x1="6"
135
- x2="6"
136
- y1="0"
137
- y2="4"
51
+ <span
52
+ class="react-date-picker__inputGroup__divider"
53
+ >
54
+ /
55
+ </span>
56
+ <input
57
+ autocomplete="off"
58
+ class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
59
+ data-input="true"
60
+ inputmode="numeric"
61
+ max="31"
62
+ min="1"
63
+ name="day"
64
+ placeholder="dd"
65
+ type="number"
66
+ value=""
138
67
  />
139
- <line
140
- x1="13"
141
- x2="13"
142
- y1="0"
143
- y2="4"
68
+ <span
69
+ class="react-date-picker__inputGroup__divider"
70
+ >
71
+ /
72
+ </span>
73
+ <input
74
+ autocomplete="off"
75
+ class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
76
+ data-input="true"
77
+ inputmode="numeric"
78
+ max="2023"
79
+ min="2022"
80
+ name="year"
81
+ placeholder="yyyy"
82
+ step="1"
83
+ type="number"
84
+ value=""
144
85
  />
145
- </svg>
146
- </button>
86
+ </div>
87
+ <button
88
+ class="react-date-picker__clear-button react-date-picker__button"
89
+ type="button"
90
+ >
91
+ <svg
92
+ class="react-date-picker__clear-button__icon react-date-picker__button__icon"
93
+ height="19"
94
+ stroke="black"
95
+ stroke-width="2"
96
+ viewBox="0 0 19 19"
97
+ width="19"
98
+ xmlns="http://www.w3.org/2000/svg"
99
+ >
100
+ <line
101
+ x1="4"
102
+ x2="15"
103
+ y1="4"
104
+ y2="15"
105
+ />
106
+ <line
107
+ x1="15"
108
+ x2="4"
109
+ y1="4"
110
+ y2="15"
111
+ />
112
+ </svg>
113
+ </button>
114
+ <button
115
+ class="react-date-picker__calendar-button react-date-picker__button"
116
+ type="button"
117
+ >
118
+ <svg
119
+ class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
120
+ height="19"
121
+ stroke="black"
122
+ stroke-width="2"
123
+ viewBox="0 0 19 19"
124
+ width="19"
125
+ xmlns="http://www.w3.org/2000/svg"
126
+ >
127
+ <rect
128
+ fill="none"
129
+ height="15"
130
+ width="15"
131
+ x="2"
132
+ y="2"
133
+ />
134
+ <line
135
+ x1="6"
136
+ x2="6"
137
+ y1="0"
138
+ y2="4"
139
+ />
140
+ <line
141
+ x1="13"
142
+ x2="13"
143
+ y1="0"
144
+ y2="4"
145
+ />
146
+ </svg>
147
+ </button>
148
+ </div>
147
149
  </div>
148
150
  </div>
149
151
  </div>
package/src/DateTimePicker/DateTimePickerGroup.tsx CHANGED
@@ -37,6 +37,8 @@ export default function DateTimePickerGroup<T>({
37
37
  required,
38
38
  disabled,
39
39
  convert,
40
+ maxDate = new Date(9999, 11, 31),
41
+ minDate = new Date(1000, 0, 1),
40
42
  ...rest
41
43
  }: DateTimePickerGroupProps<T>) {
42
44
  const [displayDateTime, setDisplayDateTime] = useState<Date | null>(null);
@@ -65,15 +67,25 @@ export default function DateTimePickerGroup<T>({
65
67
  )}
66
68
  required={required}
67
69
  disabled={disabled}>
68
- <DateTimePicker
69
- {...rest}
70
- className={classnames(
71
- FormDefaults.cssClassPrefix + 'date-time-picker',
72
- className
73
- )}
74
- value={displayDateTime}
75
- onChange={handleChange}
76
- />
70
+ <div
71
+ onBlur={() => {
72
+ // Manually trigger Formik's onBlur when the user clicks away from the date picker
73
+ input.onBlur();
74
+ }}>
75
+ <DateTimePicker
76
+ {...rest}
77
+ className={classnames(
78
+ FormDefaults.cssClassPrefix + 'date-time-picker',
79
+ className
80
+ )}
81
+ value={displayDateTime}
82
+ onChange={handleChange}
83
+ required={required}
84
+ disabled={disabled}
85
+ maxDate={maxDate}
86
+ minDate={minDate}
87
+ />
88
+ </div>
77
89
  </Group>
78
90
  );
79
91
 
package/src/DateTimePicker/__snapshots__/DateTimePicker.test.tsx.snap CHANGED
@@ -18,196 +18,198 @@ exports[`StringDateTimePickerGroup has matching snapshot 1`] = `
18
18
  >
19
19
  Created Date Time
20
20
  </label>
21
- <div
22
- class="react-datetime-picker react-datetime-picker--closed react-datetime-picker--enabled envoc-form-date-time-picker"
23
- id="createdDateTime"
24
- >
21
+ <div>
25
22
  <div
26
- class="react-datetime-picker__wrapper"
23
+ class="react-datetime-picker react-datetime-picker--closed react-datetime-picker--enabled envoc-form-date-time-picker"
24
+ id="createdDateTime"
27
25
  >
28
26
  <div
29
- class="react-datetime-picker__inputGroup"
27
+ class="react-datetime-picker__wrapper"
30
28
  >
31
- <input
32
- hidden=""
33
- max="2023-09-23T00:00"
34
- min="2022-06-22T00:00"
35
- name="datetime"
36
- step="60"
37
- style="visibility: hidden; position: absolute; z-index: -999;"
38
- type="datetime-local"
39
- value=""
40
- />
41
- <input
42
- autocomplete="off"
43
- class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__month"
44
- data-input="true"
45
- inputmode="numeric"
46
- max="12"
47
- min="1"
48
- name="month"
49
- placeholder="mm"
50
- type="number"
51
- value=""
52
- />
53
- <span
54
- class="react-datetime-picker__inputGroup__divider"
55
- >
56
- /
57
- </span>
58
- <input
59
- autocomplete="off"
60
- class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__day"
61
- data-input="true"
62
- inputmode="numeric"
63
- max="31"
64
- min="1"
65
- name="day"
66
- placeholder="dd"
67
- type="number"
68
- value=""
69
- />
70
- <span
71
- class="react-datetime-picker__inputGroup__divider"
72
- >
73
- /
74
- </span>
75
- <input
76
- autocomplete="off"
77
- class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__year"
78
- data-input="true"
79
- inputmode="numeric"
80
- max="2023"
81
- min="2022"
82
- name="year"
83
- placeholder="yyyy"
84
- step="1"
85
- type="number"
86
- value=""
87
- />
88
- <span
89
- class="react-datetime-picker__inputGroup__divider"
29
+ <div
30
+ class="react-datetime-picker__inputGroup"
90
31
  >
91
-  
92
- </span>
93
- <input
94
- autocomplete="off"
95
- class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__hour"
96
- data-input="true"
97
- inputmode="numeric"
98
- max="12"
99
- min="1"
100
- name="hour12"
101
- placeholder="--"
102
- type="number"
103
- value=""
104
- />
105
- <span
106
- class="react-datetime-picker__inputGroup__divider"
107
- >
108
- :
109
- </span>
110
- <input
111
- autocomplete="off"
112
- class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__minute"
113
- data-input="true"
114
- inputmode="numeric"
115
- max="59"
116
- min="0"
117
- name="minute"
118
- placeholder="--"
119
- type="number"
120
- value=""
121
- />
122
- <span
123
- class="react-datetime-picker__inputGroup__divider"
124
- >
125
-
126
- </span>
127
- <select
128
- class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__amPm"
129
- data-input="true"
130
- data-select="true"
131
- name="amPm"
132
- >
133
- <option
32
+ <input
33
+ hidden=""
34
+ max="2023-09-23T00:00"
35
+ min="2022-06-22T00:00"
36
+ name="datetime"
37
+ step="60"
38
+ style="visibility: hidden; position: absolute; z-index: -999;"
39
+ type="datetime-local"
134
40
  value=""
41
+ />
42
+ <input
43
+ autocomplete="off"
44
+ class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__month"
45
+ data-input="true"
46
+ inputmode="numeric"
47
+ max="12"
48
+ min="1"
49
+ name="month"
50
+ placeholder="mm"
51
+ type="number"
52
+ value=""
53
+ />
54
+ <span
55
+ class="react-datetime-picker__inputGroup__divider"
135
56
  >
136
- --
137
- </option>
138
- <option
139
- value="am"
57
+ /
58
+ </span>
59
+ <input
60
+ autocomplete="off"
61
+ class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__day"
62
+ data-input="true"
63
+ inputmode="numeric"
64
+ max="31"
65
+ min="1"
66
+ name="day"
67
+ placeholder="dd"
68
+ type="number"
69
+ value=""
70
+ />
71
+ <span
72
+ class="react-datetime-picker__inputGroup__divider"
140
73
  >
141
- AM
142
- </option>
143
- <option
144
- value="pm"
74
+ /
75
+ </span>
76
+ <input
77
+ autocomplete="off"
78
+ class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__year"
79
+ data-input="true"
80
+ inputmode="numeric"
81
+ max="2023"
82
+ min="2022"
83
+ name="year"
84
+ placeholder="yyyy"
85
+ step="1"
86
+ type="number"
87
+ value=""
88
+ />
89
+ <span
90
+ class="react-datetime-picker__inputGroup__divider"
145
91
  >
146
- PM
147
- </option>
148
- </select>
149
- </div>
150
- <button
151
- class="react-datetime-picker__clear-button react-datetime-picker__button"
152
- type="button"
153
- >
154
- <svg
155
- class="react-datetime-picker__clear-button__icon react-datetime-picker__button__icon"
156
- height="19"
157
- stroke="black"
158
- stroke-width="2"
159
- viewBox="0 0 19 19"
160
- width="19"
161
- xmlns="http://www.w3.org/2000/svg"
162
- >
163
- <line
164
- x1="4"
165
- x2="15"
166
- y1="4"
167
- y2="15"
92
+  
93
+ </span>
94
+ <input
95
+ autocomplete="off"
96
+ class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__hour"
97
+ data-input="true"
98
+ inputmode="numeric"
99
+ max="12"
100
+ min="1"
101
+ name="hour12"
102
+ placeholder="--"
103
+ type="number"
104
+ value=""
168
105
  />
169
- <line
170
- x1="15"
171
- x2="4"
172
- y1="4"
173
- y2="15"
106
+ <span
107
+ class="react-datetime-picker__inputGroup__divider"
108
+ >
109
+ :
110
+ </span>
111
+ <input
112
+ autocomplete="off"
113
+ class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__minute"
114
+ data-input="true"
115
+ inputmode="numeric"
116
+ max="59"
117
+ min="0"
118
+ name="minute"
119
+ placeholder="--"
120
+ type="number"
121
+ value=""
174
122
  />
175
- </svg>
176
- </button>
177
- <button
178
- class="react-datetime-picker__calendar-button react-datetime-picker__button"
179
- type="button"
180
- >
181
- <svg
182
- class="react-datetime-picker__calendar-button__icon react-datetime-picker__button__icon"
183
- height="19"
184
- stroke="black"
185
- stroke-width="2"
186
- viewBox="0 0 19 19"
187
- width="19"
188
- xmlns="http://www.w3.org/2000/svg"
123
+ <span
124
+ class="react-datetime-picker__inputGroup__divider"
125
+ >
126
+
127
+ </span>
128
+ <select
129
+ class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__amPm"
130
+ data-input="true"
131
+ data-select="true"
132
+ name="amPm"
133
+ >
134
+ <option
135
+ value=""
136
+ >
137
+ --
138
+ </option>
139
+ <option
140
+ value="am"
141
+ >
142
+ AM
143
+ </option>
144
+ <option
145
+ value="pm"
146
+ >
147
+ PM
148
+ </option>
149
+ </select>
150
+ </div>
151
+ <button
152
+ class="react-datetime-picker__clear-button react-datetime-picker__button"
153
+ type="button"
189
154
  >
190
- <rect
191
- fill="none"
192
- height="15"
193
- width="15"
194
- x="2"
195
- y="2"
196
- />
197
- <line
198
- x1="6"
199
- x2="6"
200
- y1="0"
201
- y2="4"
202
- />
203
- <line
204
- x1="13"
205
- x2="13"
206
- y1="0"
207
- y2="4"
208
- />
209
- </svg>
210
- </button>
155
+ <svg
156
+ class="react-datetime-picker__clear-button__icon react-datetime-picker__button__icon"
157
+ height="19"
158
+ stroke="black"
159
+ stroke-width="2"
160
+ viewBox="0 0 19 19"
161
+ width="19"
162
+ xmlns="http://www.w3.org/2000/svg"
163
+ >
164
+ <line
165
+ x1="4"
166
+ x2="15"
167
+ y1="4"
168
+ y2="15"
169
+ />
170
+ <line
171
+ x1="15"
172
+ x2="4"
173
+ y1="4"
174
+ y2="15"
175
+ />
176
+ </svg>
177
+ </button>
178
+ <button
179
+ class="react-datetime-picker__calendar-button react-datetime-picker__button"
180
+ type="button"
181
+ >
182
+ <svg
183
+ class="react-datetime-picker__calendar-button__icon react-datetime-picker__button__icon"
184
+ height="19"
185
+ stroke="black"
186
+ stroke-width="2"
187
+ viewBox="0 0 19 19"
188
+ width="19"
189
+ xmlns="http://www.w3.org/2000/svg"
190
+ >
191
+ <rect
192
+ fill="none"
193
+ height="15"
194
+ width="15"
195
+ x="2"
196
+ y="2"
197
+ />
198
+ <line
199
+ x1="6"
200
+ x2="6"
201
+ y1="0"
202
+ y2="4"
203
+ />
204
+ <line
205
+ x1="13"
206
+ x2="13"
207
+ y1="0"
208
+ y2="4"
209
+ />
210
+ </svg>
211
+ </button>
212
+ </div>
211
213
  </div>
212
214
  </div>
213
215
  </div>