pixelize-design-library 2.1.55 → 2.1.56
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.
|
@@ -242,7 +242,7 @@ function CustomDatePicker(props) {
|
|
|
242
242
|
// date={tempDate ?? new Date()}
|
|
243
243
|
, {
|
|
244
244
|
// date={tempDate ?? new Date()}
|
|
245
|
-
date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow :
|
|
245
|
+
date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat,
|
|
246
246
|
// onChange={(updatedDate) => {
|
|
247
247
|
// 👇 Redirect time change if today
|
|
248
248
|
// const corrected = disableToday && isSameDay(updatedDate, today)
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
// import React, { useState, useEffect } from "react";
|
|
3
|
+
// import { TimePickerProps } from "./DatePickerProps";
|
|
2
4
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
5
|
if (k2 === undefined) k2 = k;
|
|
4
6
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -23,10 +25,125 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
25
|
return result;
|
|
24
26
|
};
|
|
25
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
// const TimePicker: React.FC<TimePickerProps> = ({
|
|
29
|
+
// date,
|
|
30
|
+
// onChange,
|
|
31
|
+
// dateFormat,
|
|
32
|
+
// }) => {
|
|
33
|
+
// // console.log(date, "dateindatepicker");
|
|
34
|
+
// const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
|
|
35
|
+
// const [hour, setHour] = useState(date.getHours());
|
|
36
|
+
// const [minute, setMinute] = useState(date.getMinutes());
|
|
37
|
+
// const [ampm, setAmpm] = useState(
|
|
38
|
+
// is12HourFormat ? (date.getHours() >= 12 ? "PM" : "AM") : ""
|
|
39
|
+
// );
|
|
40
|
+
// useEffect(() => {
|
|
41
|
+
// const newHour = date.getHours();
|
|
42
|
+
// setHour(newHour);
|
|
43
|
+
// setMinute(date.getMinutes());
|
|
44
|
+
// if (is12HourFormat) {
|
|
45
|
+
// setAmpm(newHour >= 12 ? "PM" : "AM");
|
|
46
|
+
// }
|
|
47
|
+
// }, [date, is12HourFormat]);
|
|
48
|
+
// const convertTo24Hour = (hr: number, meridiem: string) => {
|
|
49
|
+
// if (meridiem === "AM") return hr === 12 ? 0 : hr;
|
|
50
|
+
// return hr === 12 ? 12 : hr + 12;
|
|
51
|
+
// };
|
|
52
|
+
// const updateTime = (hrInput: number, min: number, meridiem?: string) => {
|
|
53
|
+
// const newHour = is12HourFormat
|
|
54
|
+
// ? convertTo24Hour(hrInput, meridiem || ampm)
|
|
55
|
+
// : hrInput;
|
|
56
|
+
// const safeHour = Math.max(0, Math.min(23, newHour));
|
|
57
|
+
// const safeMinutes = Math.max(0, Math.min(59, min));
|
|
58
|
+
// const newDate = new Date(
|
|
59
|
+
// date.getFullYear(),
|
|
60
|
+
// date.getMonth(),
|
|
61
|
+
// date.getDate(),
|
|
62
|
+
// safeHour,
|
|
63
|
+
// safeMinutes,
|
|
64
|
+
// 0,
|
|
65
|
+
// 0
|
|
66
|
+
// );
|
|
67
|
+
// onChange(newDate);
|
|
68
|
+
// };
|
|
69
|
+
// const handleHourChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
70
|
+
// let hr = parseInt(e.target.value || "1", 10);
|
|
71
|
+
// if (is12HourFormat) {
|
|
72
|
+
// hr = Math.max(1, Math.min(12, hr));
|
|
73
|
+
// setHour(hr);
|
|
74
|
+
// updateTime(hr, minute, ampm);
|
|
75
|
+
// } else {
|
|
76
|
+
// hr = Math.max(0, Math.min(23, hr));
|
|
77
|
+
// setHour(hr);
|
|
78
|
+
// updateTime(hr, minute);
|
|
79
|
+
// }
|
|
80
|
+
// };
|
|
81
|
+
// const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
82
|
+
// let min = parseInt(e.target.value || "0", 10);
|
|
83
|
+
// // clamp between 0-59
|
|
84
|
+
// min = Math.max(0, Math.min(59, min));
|
|
85
|
+
// setMinute(min);
|
|
86
|
+
// updateTime(hour, min, ampm);
|
|
87
|
+
// };
|
|
88
|
+
// const handleAmpmToggle = () => {
|
|
89
|
+
// const newMeridiem = ampm === "AM" ? "PM" : "AM";
|
|
90
|
+
// const displayHr = hour % 12 === 0 ? 12 : hour % 12;
|
|
91
|
+
// // const newHr = convertTo24Hour(displayHr, newMeridiem);
|
|
92
|
+
// setAmpm(newMeridiem);
|
|
93
|
+
// setHour(displayHr);
|
|
94
|
+
// updateTime(displayHr, minute, newMeridiem);
|
|
95
|
+
// };
|
|
96
|
+
// const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
|
|
97
|
+
// return (
|
|
98
|
+
// <div
|
|
99
|
+
// style={{
|
|
100
|
+
// display: "flex",
|
|
101
|
+
// alignItems: "center",
|
|
102
|
+
// gap: "0.5rem",
|
|
103
|
+
// fontSize: "1.25rem",
|
|
104
|
+
// marginTop: "1rem",
|
|
105
|
+
// }}
|
|
106
|
+
// >
|
|
107
|
+
// <input
|
|
108
|
+
// type="number"
|
|
109
|
+
// value={displayHour}
|
|
110
|
+
// onChange={handleHourChange}
|
|
111
|
+
// min={is12HourFormat ? 1 : 0}
|
|
112
|
+
// max={is12HourFormat ? 12 : 23}
|
|
113
|
+
// style={{ width: "3rem", textAlign: "center" }}
|
|
114
|
+
// />
|
|
115
|
+
// :
|
|
116
|
+
// <input
|
|
117
|
+
// type="number"
|
|
118
|
+
// value={minute.toString().padStart(2, "0")}
|
|
119
|
+
// onChange={handleMinuteChange}
|
|
120
|
+
// min={0}
|
|
121
|
+
// max={59}
|
|
122
|
+
// style={{ width: "3rem", textAlign: "center" }}
|
|
123
|
+
// />
|
|
124
|
+
// {is12HourFormat && (
|
|
125
|
+
// <button
|
|
126
|
+
// type="button"
|
|
127
|
+
// onClick={handleAmpmToggle}
|
|
128
|
+
// style={{
|
|
129
|
+
// fontWeight: "bold",
|
|
130
|
+
// padding: "0.25rem 0.5rem",
|
|
131
|
+
// border: "none",
|
|
132
|
+
// background: "transparent",
|
|
133
|
+
// cursor: "pointer",
|
|
134
|
+
// }}
|
|
135
|
+
// >
|
|
136
|
+
// {ampm}
|
|
137
|
+
// </button>
|
|
138
|
+
// )}
|
|
139
|
+
// </div>
|
|
140
|
+
// );
|
|
141
|
+
// };
|
|
142
|
+
// export default TimePicker;
|
|
26
143
|
var react_1 = __importStar(require("react"));
|
|
144
|
+
var react_2 = require("@chakra-ui/react");
|
|
27
145
|
var TimePicker = function (_a) {
|
|
28
146
|
var date = _a.date, onChange = _a.onChange, dateFormat = _a.dateFormat;
|
|
29
|
-
// console.log(date, "dateindatepicker");
|
|
30
147
|
var is12HourFormat = /(hh|h).*a/i.test(dateFormat);
|
|
31
148
|
var _b = (0, react_1.useState)(date.getHours()), hour = _b[0], setHour = _b[1];
|
|
32
149
|
var _c = (0, react_1.useState)(date.getMinutes()), minute = _c[0], setMinute = _c[1];
|
|
@@ -48,56 +165,33 @@ var TimePicker = function (_a) {
|
|
|
48
165
|
var newHour = is12HourFormat
|
|
49
166
|
? convertTo24Hour(hrInput, meridiem || ampm)
|
|
50
167
|
: hrInput;
|
|
51
|
-
var
|
|
52
|
-
var safeMinutes = Math.max(0, Math.min(59, min));
|
|
53
|
-
var newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), safeHour, safeMinutes, 0, 0);
|
|
168
|
+
var newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), newHour, min, 0, 0);
|
|
54
169
|
onChange(newDate);
|
|
55
170
|
};
|
|
56
171
|
var handleHourChange = function (e) {
|
|
57
|
-
var hr = parseInt(e.target.value
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
setHour(hr);
|
|
61
|
-
updateTime(hr, minute, ampm);
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
hr = Math.max(0, Math.min(23, hr));
|
|
65
|
-
setHour(hr);
|
|
66
|
-
updateTime(hr, minute);
|
|
67
|
-
}
|
|
172
|
+
var hr = parseInt(e.target.value, 10);
|
|
173
|
+
setHour(hr);
|
|
174
|
+
updateTime(hr, minute, ampm);
|
|
68
175
|
};
|
|
69
176
|
var handleMinuteChange = function (e) {
|
|
70
|
-
var min = parseInt(e.target.value
|
|
71
|
-
// clamp between 0-59
|
|
72
|
-
min = Math.max(0, Math.min(59, min));
|
|
177
|
+
var min = parseInt(e.target.value, 10);
|
|
73
178
|
setMinute(min);
|
|
74
179
|
updateTime(hour, min, ampm);
|
|
75
180
|
};
|
|
76
|
-
var
|
|
77
|
-
var newMeridiem =
|
|
78
|
-
var displayHr = hour % 12 === 0 ? 12 : hour % 12;
|
|
79
|
-
// const newHr = convertTo24Hour(displayHr, newMeridiem);
|
|
181
|
+
var handleAmpmChange = function (e) {
|
|
182
|
+
var newMeridiem = e.target.value;
|
|
80
183
|
setAmpm(newMeridiem);
|
|
81
|
-
|
|
82
|
-
updateTime(displayHr, minute, newMeridiem);
|
|
184
|
+
updateTime(hour, minute, newMeridiem);
|
|
83
185
|
};
|
|
84
186
|
var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
|
|
85
|
-
return (react_1.default.createElement(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
react_1.default.createElement("input", { type: "number", value: minute.toString().padStart(2, "0"), onChange: handleMinuteChange, min: 0, max: 59, style: { width: "3rem", textAlign: "center" } }),
|
|
95
|
-
is12HourFormat && (react_1.default.createElement("button", { type: "button", onClick: handleAmpmToggle, style: {
|
|
96
|
-
fontWeight: "bold",
|
|
97
|
-
padding: "0.25rem 0.5rem",
|
|
98
|
-
border: "none",
|
|
99
|
-
background: "transparent",
|
|
100
|
-
cursor: "pointer",
|
|
101
|
-
} }, ampm))));
|
|
187
|
+
return (react_1.default.createElement(react_2.HStack, { spacing: 2, mt: 4 },
|
|
188
|
+
react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, w: "4rem" }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
|
|
189
|
+
var value = is12HourFormat ? i + 1 : i;
|
|
190
|
+
return (react_1.default.createElement("option", { key: value, value: value }, value.toString().padStart(2, "0")));
|
|
191
|
+
})),
|
|
192
|
+
react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, w: "4rem" }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
|
|
193
|
+
is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, w: "5rem" },
|
|
194
|
+
react_1.default.createElement("option", { value: "AM" }, "AM"),
|
|
195
|
+
react_1.default.createElement("option", { value: "PM" }, "PM")))));
|
|
102
196
|
};
|
|
103
197
|
exports.default = TimePicker;
|
package/dist/Pages/datePick.js
CHANGED
|
@@ -61,7 +61,7 @@ var DatePick = function () {
|
|
|
61
61
|
react_1.default.createElement("h2", null, "Date "),
|
|
62
62
|
react_1.default.createElement("h2", null, "time "),
|
|
63
63
|
react_1.default.createElement("h2", null, "datetime "),
|
|
64
|
-
react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy
|
|
64
|
+
react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy HH:mm", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
|
|
65
65
|
react_1.default.createElement("br", null),
|
|
66
66
|
react_1.default.createElement("h2", null, "Date Range Picker")));
|
|
67
67
|
};
|