envoc-form 5.1.0 → 5.2.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 -9
  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 +181 -179
package/README.md CHANGED
@@ -6939,7 +6939,7 @@ ___
6939
6939
 
6940
6940
  #### Defined in
6941
6941
 
6942
- packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:105
6942
+ packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:115
6943
6943
 
6944
6944
  ___
6945
6945
 
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, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: _jsx(DatePicker, __assign({}, rest, { className: clsx(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange, maxDate: maxDate, minDate: minDate, disabled: disabled })) }));
51
+ return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: _jsx("div", { 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: clsx(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange, maxDate: maxDate, minDate: minDate, disabled: disabled, required: required })) }) }));
52
55
  function handleChange(e) {
53
56
  var onChange = input.onChange;
54
57
  if (onChange === null) {
package/es/DateTimePicker/DateTimePickerGroup.d.ts CHANGED
@@ -9,4 +9,4 @@ export interface DateTimePickerGroupProps<T> extends InjectedFieldProps<T | unde
9
9
  *
10
10
  * Uses [react-datetime-picker](https://www.npmjs.com/package/react-datetime-picker)
11
11
  */
12
- export default function DateTimePickerGroup<T>({ input, meta, label, helpText, className, required, disabled, convert, ...rest }: DateTimePickerGroupProps<T>): import("react/jsx-runtime").JSX.Element;
12
+ export default function DateTimePickerGroup<T>({ input, meta, label, helpText, className, required, disabled, convert, maxDate, minDate, ...rest }: DateTimePickerGroupProps<T>): import("react/jsx-runtime").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, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'date-time-picker'), required: required, disabled: disabled, children: _jsx(DateTimePicker, __assign({}, rest, { className: clsx(FormDefaults.cssClassPrefix + 'date-time-picker', className), value: displayDateTime, onChange: handleChange })) }));
51
+ return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'date-time-picker'), required: required, disabled: disabled, children: _jsx("div", { 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: clsx(FormDefaults.cssClassPrefix + 'date-time-picker', className), value: displayDateTime, onChange: handleChange, disabled: disabled, required: required, 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, { input: input, meta: meta, label: label, helpText: helpText, className: (0, clsx_1.clsx)(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, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange, maxDate: maxDate, minDate: minDate, disabled: disabled })) }));
57
+ return ((0, jsx_runtime_1.jsx)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: (0, jsx_runtime_1.jsx)("div", { 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, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange, maxDate: maxDate, minDate: minDate, disabled: disabled, required: required })) }) }));
58
61
  function handleChange(e) {
59
62
  var onChange = input.onChange;
60
63
  if (onChange === null) {
package/lib/DateTimePicker/DateTimePickerGroup.d.ts CHANGED
@@ -9,4 +9,4 @@ export interface DateTimePickerGroupProps<T> extends InjectedFieldProps<T | unde
9
9
  *
10
10
  * Uses [react-datetime-picker](https://www.npmjs.com/package/react-datetime-picker)
11
11
  */
12
- export default function DateTimePickerGroup<T>({ input, meta, label, helpText, className, required, disabled, convert, ...rest }: DateTimePickerGroupProps<T>): import("react/jsx-runtime").JSX.Element;
12
+ export default function DateTimePickerGroup<T>({ input, meta, label, helpText, className, required, disabled, convert, maxDate, minDate, ...rest }: DateTimePickerGroupProps<T>): import("react/jsx-runtime").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, { input: input, meta: meta, label: label, helpText: helpText, className: (0, clsx_1.clsx)(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, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-time-picker', className), value: displayDateTime, onChange: handleChange })) }));
56
+ return ((0, jsx_runtime_1.jsx)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-time-picker'), required: required, disabled: disabled, children: (0, jsx_runtime_1.jsx)("div", { 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, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-time-picker', className), value: displayDateTime, onChange: handleChange, disabled: disabled, required: required, 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": "5.1.0",
3
+ "version": "5.2.0",
4
4
  "description": "Envoc form components",
5
5
  "keywords": [
6
6
  "react-component",
@@ -37,7 +37,7 @@
37
37
  "dependencies": {
38
38
  "axios": "^0.21.1",
39
39
  "date-fns": "^2.22.1",
40
- "envoc-request": "^5.1.0",
40
+ "envoc-request": "^5.2.0",
41
41
  "lru-cache": "^6.0.0",
42
42
  "prop-types": "^15.7.2",
43
43
  "react-date-picker": "^8.2.0",
package/src/DatePicker/DatePickerGroup.tsx CHANGED
@@ -59,15 +59,25 @@ export default function DatePickerGroup<T>({
59
59
  className={clsx(className, FormDefaults.cssClassPrefix + 'date-picker')}
60
60
  required={required}
61
61
  disabled={disabled}>
62
- <DatePicker
63
- {...rest}
64
- className={clsx(FormDefaults.cssClassPrefix + 'date-picker', className)}
65
- value={displayDate}
66
- onChange={handleChange}
67
- maxDate={maxDate}
68
- minDate={minDate}
69
- disabled={disabled}
70
- />
62
+ <div
63
+ onBlur={() => {
64
+ // Manually trigger Formik's onBlur when the user clicks away from the date picker
65
+ input.onBlur();
66
+ }}>
67
+ <DatePicker
68
+ {...rest}
69
+ className={clsx(
70
+ FormDefaults.cssClassPrefix + 'date-picker',
71
+ className
72
+ )}
73
+ value={displayDate}
74
+ onChange={handleChange}
75
+ maxDate={maxDate}
76
+ minDate={minDate}
77
+ disabled={disabled}
78
+ required={required}
79
+ />
80
+ </div>
71
81
  </Group>
72
82
  );
73
83
 
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={clsx(
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={clsx(
78
+ FormDefaults.cssClassPrefix + 'date-time-picker',
79
+ className
80
+ )}
81
+ value={displayDateTime}
82
+ onChange={handleChange}
83
+ disabled={disabled}
84
+ required={required}
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,197 +18,199 @@ 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
- aria-expanded="false"
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"
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"
190
154
  >
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>
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
+ aria-expanded="false"
180
+ class="react-datetime-picker__calendar-button react-datetime-picker__button"
181
+ type="button"
182
+ >
183
+ <svg
184
+ class="react-datetime-picker__calendar-button__icon react-datetime-picker__button__icon"
185
+ height="19"
186
+ stroke="black"
187
+ stroke-width="2"
188
+ viewBox="0 0 19 19"
189
+ width="19"
190
+ xmlns="http://www.w3.org/2000/svg"
191
+ >
192
+ <rect
193
+ fill="none"
194
+ height="15"
195
+ width="15"
196
+ x="2"
197
+ y="2"
198
+ />
199
+ <line
200
+ x1="6"
201
+ x2="6"
202
+ y1="0"
203
+ y2="4"
204
+ />
205
+ <line
206
+ x1="13"
207
+ x2="13"
208
+ y1="0"
209
+ y2="4"
210
+ />
211
+ </svg>
212
+ </button>
213
+ </div>
212
214
  </div>
213
215
  </div>
214
216
  </div>