v-datepicker-lite 0.0.3 → 0.0.5
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 +9 -13
- package/index.js +328 -316
- package/package.json +1 -1
- package/style.css +1 -1
package/README.md
CHANGED
|
@@ -191,22 +191,18 @@ Customize the appearance using the following CSS variables defined in `style.css
|
|
|
191
191
|
|
|
192
192
|
```css
|
|
193
193
|
:root {
|
|
194
|
-
--date-picker-primary: #
|
|
195
|
-
--date-picker-primary-fg: #ffffff;
|
|
196
|
-
--date-picker-text:
|
|
197
|
-
--date-picker-border: #
|
|
198
|
-
--date-picker-secondary: #
|
|
199
|
-
--date-picker-
|
|
200
|
-
--date-picker-
|
|
201
|
-
--date-picker-
|
|
202
|
-
--date-picker-
|
|
194
|
+
--date-picker-primary: #2d66ed;
|
|
195
|
+
--date-picker-primary-fg: #ffffff;
|
|
196
|
+
--date-picker-text: inherit;
|
|
197
|
+
--date-picker-border: #00000020;
|
|
198
|
+
--date-picker-secondary: #00000010;
|
|
199
|
+
--date-picker-hover: #00000010;
|
|
200
|
+
--date-picker-disabled: #000000b4;
|
|
201
|
+
--date-picker-today: #00000010;
|
|
202
|
+
--date-picker-radius: 0.375em;
|
|
203
203
|
}
|
|
204
204
|
```
|
|
205
205
|
|
|
206
206
|
## Author
|
|
207
207
|
|
|
208
208
|
[safdar-azeem](https://github.com/safdar-azeem)
|
|
209
|
-
|
|
210
|
-
## License
|
|
211
|
-
|
|
212
|
-
MIT
|
package/index.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
3
|
-
const e = t.getFullYear(), u = String(t.getMonth() + 1).padStart(2, "0"),
|
|
4
|
-
return r.replace("YYYY", e.toString()).replace("MM", u).replace("DD",
|
|
1
|
+
import { defineComponent as q, computed as Y, createElementBlock as D, openBlock as v, createElementVNode as p, Fragment as C, renderList as H, unref as o, toDisplayString as x, normalizeClass as I, ref as N, watch as O, nextTick as B, onMounted as R, createBlock as z, createCommentVNode as G, normalizeStyle as Q, createVNode as X } from "vue";
|
|
2
|
+
const U = (t, r = "YYYY-MM-DD") => {
|
|
3
|
+
const e = t.getFullYear(), u = String(t.getMonth() + 1).padStart(2, "0"), s = String(t.getDate()).padStart(2, "0"), d = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0"), a = String(t.getSeconds()).padStart(2, "0"), n = String(t.getMilliseconds()).padStart(3, "0");
|
|
4
|
+
return r.replace("YYYY", e.toString()).replace("MM", u).replace("DD", s).replace("HH", d).replace("mm", i).replace("ss", a).replace("sss", n);
|
|
5
5
|
}, W = (t) => {
|
|
6
6
|
if (!t) return null;
|
|
7
7
|
const r = new Date(t);
|
|
8
8
|
return isNaN(r.getTime()) ? null : r;
|
|
9
|
-
},
|
|
9
|
+
}, L = (t, r) => t.getFullYear() === r.getFullYear() && t.getMonth() === r.getMonth() && t.getDate() === r.getDate(), ee = (t) => {
|
|
10
10
|
const r = new Date(t.getFullYear(), 0, 1), e = (t.getTime() - r.getTime()) / 864e5;
|
|
11
11
|
return Math.ceil((e + r.getDay() + 1) / 7);
|
|
12
|
-
},
|
|
13
|
-
const e = new Date(t, r, 1),
|
|
12
|
+
}, Z = (t, r) => {
|
|
13
|
+
const e = new Date(t, r, 1), s = new Date(t, r + 1, 0).getDate(), d = e.getDay(), i = [], a = /* @__PURE__ */ new Date(), n = r === 0 ? 11 : r - 1, m = r === 0 ? t - 1 : t, g = new Date(m, n + 1, 0).getDate();
|
|
14
14
|
for (let f = d - 1; f >= 0; f--) {
|
|
15
|
-
const c = new Date(m,
|
|
15
|
+
const c = new Date(m, n, g - f);
|
|
16
16
|
i.push({
|
|
17
17
|
date: c,
|
|
18
|
-
day:
|
|
19
|
-
month:
|
|
18
|
+
day: g - f,
|
|
19
|
+
month: n,
|
|
20
20
|
year: m,
|
|
21
21
|
isCurrentMonth: !1,
|
|
22
|
-
isToday:
|
|
22
|
+
isToday: L(c, a),
|
|
23
23
|
isSelected: !1,
|
|
24
24
|
isDisabled: !1
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
|
-
for (let f = 1; f <=
|
|
27
|
+
for (let f = 1; f <= s; f++) {
|
|
28
28
|
const c = new Date(t, r, f);
|
|
29
29
|
i.push({
|
|
30
30
|
date: c,
|
|
@@ -32,30 +32,30 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
32
32
|
month: r,
|
|
33
33
|
year: t,
|
|
34
34
|
isCurrentMonth: !0,
|
|
35
|
-
isToday:
|
|
35
|
+
isToday: L(c, a),
|
|
36
36
|
isSelected: !1,
|
|
37
37
|
isDisabled: !1
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
const
|
|
41
|
-
for (let f = 1; f <=
|
|
42
|
-
const c = new Date(k,
|
|
40
|
+
const l = 42 - i.length, b = r === 11 ? 0 : r + 1, k = r === 11 ? t + 1 : t;
|
|
41
|
+
for (let f = 1; f <= l; f++) {
|
|
42
|
+
const c = new Date(k, b, f);
|
|
43
43
|
i.push({
|
|
44
44
|
date: c,
|
|
45
45
|
day: f,
|
|
46
|
-
month:
|
|
46
|
+
month: b,
|
|
47
47
|
year: k,
|
|
48
48
|
isCurrentMonth: !1,
|
|
49
|
-
isToday:
|
|
49
|
+
isToday: L(c, a),
|
|
50
50
|
isSelected: !1,
|
|
51
51
|
isDisabled: !1
|
|
52
52
|
});
|
|
53
53
|
}
|
|
54
54
|
return i;
|
|
55
55
|
}, te = (t, r) => {
|
|
56
|
-
const e =
|
|
57
|
-
for (let
|
|
58
|
-
const d = e.slice(
|
|
56
|
+
const e = Z(t, r), u = [];
|
|
57
|
+
for (let s = 0; s < e.length; s += 7) {
|
|
58
|
+
const d = e.slice(s, s + 7), i = ee(d[0].date);
|
|
59
59
|
u.push({
|
|
60
60
|
weekNumber: i,
|
|
61
61
|
days: d,
|
|
@@ -63,7 +63,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
63
63
|
});
|
|
64
64
|
}
|
|
65
65
|
return u;
|
|
66
|
-
},
|
|
66
|
+
}, E = (t) => [
|
|
67
67
|
"January",
|
|
68
68
|
"February",
|
|
69
69
|
"March",
|
|
@@ -83,9 +83,9 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
83
83
|
isSelected: !1,
|
|
84
84
|
isDisabled: !1
|
|
85
85
|
})), ae = (t, r, e, u) => {
|
|
86
|
-
const
|
|
87
|
-
return r &&
|
|
88
|
-
},
|
|
86
|
+
const s = U(t, "YYYY-MM-DD");
|
|
87
|
+
return r && s < r || e && s > e ? !0 : u ? u.some((d) => d.end ? s >= d.start && s <= d.end : s === d.start) : !1;
|
|
88
|
+
}, A = [
|
|
89
89
|
"January",
|
|
90
90
|
"February",
|
|
91
91
|
"March",
|
|
@@ -98,7 +98,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
98
98
|
"October",
|
|
99
99
|
"November",
|
|
100
100
|
"December"
|
|
101
|
-
],
|
|
101
|
+
], j = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ne = { class: "date-picker-content" }, se = { class: "date-picker-table" }, le = { class: "date-picker-weekdays-row" }, re = { class: "date-picker-days-body" }, oe = ["onClick", "disabled"], ce = /* @__PURE__ */ q({
|
|
102
102
|
__name: "DateView",
|
|
103
103
|
props: {
|
|
104
104
|
currentDate: {},
|
|
@@ -109,47 +109,47 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
109
109
|
},
|
|
110
110
|
emits: ["select"],
|
|
111
111
|
setup(t, { emit: r }) {
|
|
112
|
-
const e = t, u = r,
|
|
113
|
-
...
|
|
114
|
-
isSelected: e.selectedDate ?
|
|
115
|
-
isDisabled: ae(
|
|
116
|
-
}))), d =
|
|
112
|
+
const e = t, u = r, s = Y(() => Z(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((n) => ({
|
|
113
|
+
...n,
|
|
114
|
+
isSelected: e.selectedDate ? L(n.date, e.selectedDate) : !1,
|
|
115
|
+
isDisabled: ae(n.date, e.minDate, e.maxDate, e.disabledDates)
|
|
116
|
+
}))), d = Y(() => {
|
|
117
117
|
const a = [];
|
|
118
|
-
for (let
|
|
119
|
-
a.push(
|
|
118
|
+
for (let n = 0; n < s.value.length; n += 7)
|
|
119
|
+
a.push(s.value.slice(n, n + 7));
|
|
120
120
|
return a;
|
|
121
121
|
}), i = (a) => {
|
|
122
122
|
a.isDisabled || u("select", a.date);
|
|
123
123
|
};
|
|
124
|
-
return (a,
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
(v(!0),
|
|
124
|
+
return (a, n) => (v(), D("div", ne, [
|
|
125
|
+
p("table", se, [
|
|
126
|
+
p("thead", null, [
|
|
127
|
+
p("tr", le, [
|
|
128
|
+
(v(!0), D(C, null, H(o(j), (m) => (v(), D("th", { key: m }, x(m), 1))), 128))
|
|
129
129
|
])
|
|
130
130
|
]),
|
|
131
|
-
|
|
132
|
-
(v(!0),
|
|
133
|
-
key:
|
|
131
|
+
p("tbody", re, [
|
|
132
|
+
(v(!0), D(C, null, H(d.value, (m, g) => (v(), D("tr", {
|
|
133
|
+
key: g,
|
|
134
134
|
class: "date-picker-week-row"
|
|
135
135
|
}, [
|
|
136
|
-
(v(!0),
|
|
137
|
-
key: `${
|
|
136
|
+
(v(!0), D(C, null, H(m, (l) => (v(), D("td", {
|
|
137
|
+
key: `${l.year}-${l.month}-${l.day}`,
|
|
138
138
|
class: "date-picker-day-cell"
|
|
139
139
|
}, [
|
|
140
|
-
|
|
141
|
-
class:
|
|
140
|
+
p("button", {
|
|
141
|
+
class: I([
|
|
142
142
|
"date-picker-day",
|
|
143
143
|
{
|
|
144
|
-
"other-month": !
|
|
145
|
-
today:
|
|
146
|
-
selected:
|
|
147
|
-
disabled:
|
|
144
|
+
"other-month": !l.isCurrentMonth,
|
|
145
|
+
today: l.isToday,
|
|
146
|
+
selected: l.isSelected,
|
|
147
|
+
disabled: l.isDisabled
|
|
148
148
|
}
|
|
149
149
|
]),
|
|
150
|
-
onClick: (
|
|
151
|
-
disabled:
|
|
152
|
-
},
|
|
150
|
+
onClick: (b) => i(l),
|
|
151
|
+
disabled: l.isDisabled
|
|
152
|
+
}, x(l.day), 11, oe)
|
|
153
153
|
]))), 128))
|
|
154
154
|
]))), 128))
|
|
155
155
|
])
|
|
@@ -160,7 +160,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
160
160
|
class: "date-picker-table date-picker-week-table",
|
|
161
161
|
cellpadding: "0",
|
|
162
162
|
cellspacing: "0"
|
|
163
|
-
}, de = { class: "date-picker-weekdays-row" }, me = { class: "date-picker-weeks-body" }, ve = ["onClick"], he = { class: "date-picker-week-number-cell" }, pe = { class: "date-picker-week-number" },
|
|
163
|
+
}, de = { class: "date-picker-weekdays-row" }, me = { class: "date-picker-weeks-body" }, ve = ["onClick"], he = { class: "date-picker-week-number-cell" }, pe = { class: "date-picker-week-number" }, De = /* @__PURE__ */ q({
|
|
164
164
|
__name: "WeekView",
|
|
165
165
|
props: {
|
|
166
166
|
currentDate: {},
|
|
@@ -168,52 +168,52 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
168
168
|
},
|
|
169
169
|
emits: ["select"],
|
|
170
170
|
setup(t, { emit: r }) {
|
|
171
|
-
const e = t, u = r,
|
|
172
|
-
const
|
|
171
|
+
const e = t, u = r, s = Y(() => te(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((a) => {
|
|
172
|
+
const n = e.selectedDate ? a.days.some((m) => L(m.date, e.selectedDate)) : !1;
|
|
173
173
|
return {
|
|
174
174
|
...a,
|
|
175
|
-
isSelected:
|
|
175
|
+
isSelected: n
|
|
176
176
|
};
|
|
177
177
|
})), d = (i) => {
|
|
178
|
-
var
|
|
179
|
-
const a = ((
|
|
178
|
+
var n;
|
|
179
|
+
const a = ((n = i.days.find((m) => m.isCurrentMonth)) == null ? void 0 : n.date) || i.days[0].date;
|
|
180
180
|
u("select", a);
|
|
181
181
|
};
|
|
182
|
-
return (i, a) => (v(),
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
a[0] || (a[0] =
|
|
187
|
-
(v(!0),
|
|
182
|
+
return (i, a) => (v(), D("div", ie, [
|
|
183
|
+
p("table", ue, [
|
|
184
|
+
p("thead", null, [
|
|
185
|
+
p("tr", de, [
|
|
186
|
+
a[0] || (a[0] = p("th", { class: "date-picker-weekday date-picker-week-header" }, "Wk", -1)),
|
|
187
|
+
(v(!0), D(C, null, H(o(j), (n) => (v(), D("th", { key: n }, x(n), 1))), 128))
|
|
188
188
|
])
|
|
189
189
|
]),
|
|
190
|
-
|
|
191
|
-
(v(!0),
|
|
192
|
-
key:
|
|
193
|
-
class:
|
|
190
|
+
p("tbody", me, [
|
|
191
|
+
(v(!0), D(C, null, H(s.value, (n) => (v(), D("tr", {
|
|
192
|
+
key: n.weekNumber,
|
|
193
|
+
class: I([
|
|
194
194
|
"date-picker-week-row",
|
|
195
195
|
{
|
|
196
|
-
selected:
|
|
196
|
+
selected: n.isSelected
|
|
197
197
|
}
|
|
198
198
|
]),
|
|
199
|
-
onClick: (m) => d(
|
|
199
|
+
onClick: (m) => d(n)
|
|
200
200
|
}, [
|
|
201
|
-
|
|
202
|
-
|
|
201
|
+
p("td", he, [
|
|
202
|
+
p("div", pe, x(n.weekNumber), 1)
|
|
203
203
|
]),
|
|
204
|
-
(v(!0),
|
|
204
|
+
(v(!0), D(C, null, H(n.days, (m) => (v(), D("td", {
|
|
205
205
|
key: `${m.year}-${m.month}-${m.day}`,
|
|
206
206
|
class: "date-picker-day-cell"
|
|
207
207
|
}, [
|
|
208
|
-
|
|
209
|
-
class:
|
|
208
|
+
p("button", {
|
|
209
|
+
class: I([
|
|
210
210
|
"date-picker-day",
|
|
211
211
|
{
|
|
212
212
|
"other-month": !m.isCurrentMonth,
|
|
213
213
|
today: m.isToday
|
|
214
214
|
}
|
|
215
215
|
])
|
|
216
|
-
},
|
|
216
|
+
}, x(m.day), 3)
|
|
217
217
|
]))), 128))
|
|
218
218
|
], 10, ve))), 128))
|
|
219
219
|
])
|
|
@@ -221,79 +221,79 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
221
221
|
]));
|
|
222
222
|
}
|
|
223
223
|
});
|
|
224
|
-
function
|
|
225
|
-
const
|
|
224
|
+
function ge(t, r = "24h", e = 15, u) {
|
|
225
|
+
const s = N(0), d = N(0), i = N([]), a = Y(() => r === "12h"), n = () => {
|
|
226
226
|
if (t)
|
|
227
|
-
|
|
227
|
+
s.value = t.getHours(), d.value = t.getMinutes();
|
|
228
228
|
else {
|
|
229
229
|
const c = /* @__PURE__ */ new Date();
|
|
230
|
-
|
|
230
|
+
s.value = c.getHours(), d.value = c.getMinutes();
|
|
231
231
|
}
|
|
232
|
-
|
|
232
|
+
g();
|
|
233
233
|
}, m = (c) => {
|
|
234
|
-
c && (
|
|
235
|
-
},
|
|
236
|
-
const c = [],
|
|
237
|
-
for (let
|
|
238
|
-
const
|
|
239
|
-
for (let
|
|
240
|
-
for (let
|
|
241
|
-
const
|
|
234
|
+
c && (s.value = c.getHours(), d.value = c.getMinutes());
|
|
235
|
+
}, g = () => {
|
|
236
|
+
const c = [], y = a.value ? 1 : 0;
|
|
237
|
+
for (let M = 0; M < (a.value ? 2 : 1); M++) {
|
|
238
|
+
const P = a.value ? M === 0 ? " AM" : " PM" : "";
|
|
239
|
+
for (let w = y; w <= (a.value ? 12 : 23); w++)
|
|
240
|
+
for (let T = 0; T < 60; T += e) {
|
|
241
|
+
const F = (a.value, w), h = a.value ? w === 12 ? M === 0 ? 0 : 12 : w + M * 12 : w, $ = `${String(F).padStart(2, "0")}:${String(T).padStart(2, "0")}` + P;
|
|
242
242
|
c.push({
|
|
243
|
-
display:
|
|
244
|
-
value: `${String(
|
|
245
|
-
hour:
|
|
246
|
-
minute:
|
|
243
|
+
display: $,
|
|
244
|
+
value: `${String(h).padStart(2, "0")}:${String(T).padStart(2, "0")}`,
|
|
245
|
+
hour: h,
|
|
246
|
+
minute: T
|
|
247
247
|
});
|
|
248
248
|
}
|
|
249
249
|
}
|
|
250
|
-
a.value ? i.value = c.map((
|
|
251
|
-
},
|
|
250
|
+
a.value ? i.value = c.map((M) => M.display) : i.value = c.map((M) => M.value);
|
|
251
|
+
}, l = () => {
|
|
252
252
|
if (a.value) {
|
|
253
|
-
const c =
|
|
253
|
+
const c = s.value === 0 ? 12 : s.value > 12 ? s.value - 12 : s.value, y = s.value < 12 ? " AM" : " PM";
|
|
254
254
|
return `${String(c).padStart(2, "0")}:${String(d.value).padStart(
|
|
255
255
|
2,
|
|
256
256
|
"0"
|
|
257
|
-
)}${
|
|
257
|
+
)}${y}`;
|
|
258
258
|
}
|
|
259
|
-
return `${String(
|
|
259
|
+
return `${String(s.value).padStart(2, "0")}:${String(d.value).padStart(2, "0")}`;
|
|
260
260
|
};
|
|
261
261
|
return {
|
|
262
|
-
hours:
|
|
262
|
+
hours: s,
|
|
263
263
|
minutes: d,
|
|
264
264
|
timeOptions: i,
|
|
265
265
|
is12HourFormat: a,
|
|
266
|
-
initializeTime:
|
|
266
|
+
initializeTime: n,
|
|
267
267
|
updateTime: m,
|
|
268
|
-
generateTimeOptions:
|
|
269
|
-
getCurrentTimeString:
|
|
268
|
+
generateTimeOptions: g,
|
|
269
|
+
getCurrentTimeString: l,
|
|
270
270
|
selectTime: (c) => {
|
|
271
|
-
let
|
|
271
|
+
let y, M;
|
|
272
272
|
if (a.value) {
|
|
273
|
-
const [
|
|
274
|
-
|
|
273
|
+
const [w, T] = c.split(" "), [F, h] = w.split(":");
|
|
274
|
+
y = parseInt(F), M = parseInt(h), T === "AM" ? y === 12 && (y = 0) : y !== 12 && (y += 12);
|
|
275
275
|
} else {
|
|
276
|
-
const [
|
|
277
|
-
|
|
276
|
+
const [w, T] = c.split(":");
|
|
277
|
+
y = parseInt(w), M = parseInt(T);
|
|
278
278
|
}
|
|
279
|
-
|
|
280
|
-
const
|
|
281
|
-
|
|
279
|
+
s.value = y, d.value = M;
|
|
280
|
+
const P = t ? new Date(t.getTime()) : /* @__PURE__ */ new Date();
|
|
281
|
+
P.setHours(y, M, 0, 0), u("update", P);
|
|
282
282
|
},
|
|
283
283
|
scrollToSelected: (c) => {
|
|
284
284
|
if (!c) return;
|
|
285
|
-
const
|
|
286
|
-
if (
|
|
287
|
-
const
|
|
288
|
-
c.scrollTop = Math.max(0,
|
|
285
|
+
const y = i.value.findIndex((M) => M === l());
|
|
286
|
+
if (y >= 0) {
|
|
287
|
+
const P = c.clientHeight, w = y * 30 - P / 2 + 30 / 2;
|
|
288
|
+
c.scrollTop = Math.max(0, w);
|
|
289
289
|
}
|
|
290
290
|
},
|
|
291
291
|
onTimeUpdate: (c) => {
|
|
292
|
-
|
|
292
|
+
s.value = c.getHours(), d.value = c.getMinutes(), u("update", c);
|
|
293
293
|
}
|
|
294
294
|
};
|
|
295
295
|
}
|
|
296
|
-
const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"], J = /* @__PURE__ */
|
|
296
|
+
const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"], J = /* @__PURE__ */ q({
|
|
297
297
|
__name: "TimeView",
|
|
298
298
|
props: {
|
|
299
299
|
selectedTime: {},
|
|
@@ -302,54 +302,56 @@ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"]
|
|
|
302
302
|
},
|
|
303
303
|
emits: ["update"],
|
|
304
304
|
setup(t, { emit: r }) {
|
|
305
|
-
const e = t, u = r,
|
|
306
|
-
return
|
|
305
|
+
const e = t, u = r, s = N(null), { timeOptions: d, initializeTime: i, updateTime: a, getCurrentTimeString: n, selectTime: m, scrollToSelected: g } = ge(e.selectedTime, e.timeFormat, e.timeInterval, u);
|
|
306
|
+
return O(
|
|
307
307
|
() => e.selectedTime,
|
|
308
|
-
(
|
|
309
|
-
a(
|
|
310
|
-
|
|
308
|
+
(l) => {
|
|
309
|
+
a(l), B(() => {
|
|
310
|
+
g(s.value);
|
|
311
311
|
});
|
|
312
312
|
},
|
|
313
313
|
{ immediate: !0 }
|
|
314
|
-
),
|
|
314
|
+
), O(
|
|
315
315
|
() => e.timeFormat,
|
|
316
316
|
() => {
|
|
317
|
-
i(),
|
|
318
|
-
|
|
317
|
+
i(), B(() => {
|
|
318
|
+
g(s.value);
|
|
319
319
|
});
|
|
320
320
|
}
|
|
321
|
-
),
|
|
321
|
+
), O(
|
|
322
322
|
() => e.timeInterval,
|
|
323
323
|
() => {
|
|
324
|
-
i(),
|
|
325
|
-
|
|
324
|
+
i(), B(() => {
|
|
325
|
+
g(s.value);
|
|
326
326
|
});
|
|
327
327
|
}
|
|
328
|
-
),
|
|
329
|
-
i(),
|
|
330
|
-
|
|
328
|
+
), R(() => {
|
|
329
|
+
i(), B(() => {
|
|
330
|
+
setTimeout(() => {
|
|
331
|
+
g(s.value);
|
|
332
|
+
}, 3);
|
|
331
333
|
});
|
|
332
|
-
}), (
|
|
333
|
-
|
|
334
|
+
}), (l, b) => (v(), D("div", ke, [
|
|
335
|
+
p("div", {
|
|
334
336
|
ref_key: "timeListRef",
|
|
335
|
-
ref:
|
|
337
|
+
ref: s,
|
|
336
338
|
class: "time-wheel",
|
|
337
339
|
role: "listbox",
|
|
338
340
|
"aria-label": "Time Selection"
|
|
339
341
|
}, [
|
|
340
|
-
(v(!0),
|
|
342
|
+
(v(!0), D(C, null, H(o(d), (k) => (v(), D("div", {
|
|
341
343
|
key: k,
|
|
342
|
-
class:
|
|
343
|
-
selected: k === o(
|
|
344
|
+
class: I(["time-option", {
|
|
345
|
+
selected: k === o(n)()
|
|
344
346
|
}]),
|
|
345
347
|
role: "option",
|
|
346
|
-
"aria-selected": k === o(
|
|
348
|
+
"aria-selected": k === o(n)(),
|
|
347
349
|
onClick: (f) => o(m)(k)
|
|
348
|
-
},
|
|
350
|
+
}, x(k), 11, fe))), 128))
|
|
349
351
|
], 512)
|
|
350
352
|
]));
|
|
351
353
|
}
|
|
352
|
-
}),
|
|
354
|
+
}), Me = { class: "year-view-layout" }, ye = { class: "years-section" }, be = { class: "years-list" }, _e = ["onClick"], we = { class: "months-section" }, Se = { class: "date-picker-table date-picker-months-table" }, Ye = { class: "date-picker-months-body" }, $e = ["onClick", "disabled"], Te = /* @__PURE__ */ q({
|
|
353
355
|
__name: "YearView",
|
|
354
356
|
props: {
|
|
355
357
|
currentDate: {},
|
|
@@ -357,63 +359,63 @@ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"]
|
|
|
357
359
|
},
|
|
358
360
|
emits: ["select", "month-select"],
|
|
359
361
|
setup(t, { emit: r }) {
|
|
360
|
-
const e = t, u = r,
|
|
361
|
-
var
|
|
362
|
-
return (
|
|
363
|
-
}), i =
|
|
364
|
-
const
|
|
365
|
-
return Array.from({ length: 12 }, (
|
|
366
|
-
}), a =
|
|
367
|
-
...
|
|
368
|
-
isSelected: e.selectedDate ?
|
|
369
|
-
}))),
|
|
370
|
-
const
|
|
371
|
-
for (let
|
|
372
|
-
|
|
373
|
-
return
|
|
374
|
-
}), m = (
|
|
375
|
-
u("select",
|
|
376
|
-
},
|
|
377
|
-
u("month-select",
|
|
362
|
+
const e = t, u = r, s = Y(() => e.currentDate.getFullYear()), d = Y(() => {
|
|
363
|
+
var l;
|
|
364
|
+
return (l = e.selectedDate) == null ? void 0 : l.getFullYear();
|
|
365
|
+
}), i = Y(() => {
|
|
366
|
+
const l = Math.floor(s.value / 10) * 10;
|
|
367
|
+
return Array.from({ length: 12 }, (b, k) => l + k - 1);
|
|
368
|
+
}), a = Y(() => E(s.value).map((l) => ({
|
|
369
|
+
...l,
|
|
370
|
+
isSelected: e.selectedDate ? l.month === e.selectedDate.getMonth() && l.year === e.selectedDate.getFullYear() : !1
|
|
371
|
+
}))), n = Y(() => {
|
|
372
|
+
const l = [];
|
|
373
|
+
for (let b = 0; b < a.value.length; b += 3)
|
|
374
|
+
l.push(a.value.slice(b, b + 3));
|
|
375
|
+
return l;
|
|
376
|
+
}), m = (l) => {
|
|
377
|
+
u("select", l);
|
|
378
|
+
}, g = (l) => {
|
|
379
|
+
u("month-select", l.month);
|
|
378
380
|
};
|
|
379
|
-
return (
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
(v(!0),
|
|
381
|
+
return (l, b) => (v(), D("div", Me, [
|
|
382
|
+
p("div", ye, [
|
|
383
|
+
p("div", be, [
|
|
384
|
+
(v(!0), D(C, null, H(i.value, (k) => (v(), D("button", {
|
|
383
385
|
key: k,
|
|
384
|
-
class:
|
|
386
|
+
class: I([
|
|
385
387
|
"year-item",
|
|
386
388
|
{
|
|
387
389
|
selected: k === d.value,
|
|
388
|
-
current: k ===
|
|
390
|
+
current: k === s.value
|
|
389
391
|
}
|
|
390
392
|
]),
|
|
391
393
|
onClick: (f) => m(k)
|
|
392
|
-
},
|
|
394
|
+
}, x(k), 11, _e))), 128))
|
|
393
395
|
])
|
|
394
396
|
]),
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
(v(!0),
|
|
397
|
+
p("div", we, [
|
|
398
|
+
p("table", Se, [
|
|
399
|
+
p("tbody", Ye, [
|
|
400
|
+
(v(!0), D(C, null, H(n.value, (k, f) => (v(), D("tr", {
|
|
399
401
|
key: f,
|
|
400
402
|
class: "date-picker-months-row"
|
|
401
403
|
}, [
|
|
402
|
-
(v(!0),
|
|
404
|
+
(v(!0), D(C, null, H(k, (c) => (v(), D("td", {
|
|
403
405
|
key: c.month,
|
|
404
406
|
class: "date-picker-month-cell"
|
|
405
407
|
}, [
|
|
406
|
-
|
|
407
|
-
class:
|
|
408
|
+
p("button", {
|
|
409
|
+
class: I([
|
|
408
410
|
"date-picker-month",
|
|
409
411
|
{
|
|
410
412
|
selected: c.isSelected,
|
|
411
413
|
disabled: c.isDisabled
|
|
412
414
|
}
|
|
413
415
|
]),
|
|
414
|
-
onClick: (
|
|
416
|
+
onClick: (y) => g(c),
|
|
415
417
|
disabled: c.isDisabled
|
|
416
|
-
},
|
|
418
|
+
}, x(c.name.substring(0, 3)), 11, $e)
|
|
417
419
|
]))), 128))
|
|
418
420
|
]))), 128))
|
|
419
421
|
])
|
|
@@ -421,7 +423,7 @@ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"]
|
|
|
421
423
|
])
|
|
422
424
|
]));
|
|
423
425
|
}
|
|
424
|
-
}), Ce = { class: "date-picker-content" }, He = { class: "date-picker-table date-picker-months-table" },
|
|
426
|
+
}), Ce = { class: "date-picker-content" }, He = { class: "date-picker-table date-picker-months-table" }, Fe = { class: "date-picker-months-body" }, Pe = ["onClick", "disabled"], xe = /* @__PURE__ */ q({
|
|
425
427
|
__name: "MonthView",
|
|
426
428
|
props: {
|
|
427
429
|
currentDate: {},
|
|
@@ -429,46 +431,46 @@ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"]
|
|
|
429
431
|
},
|
|
430
432
|
emits: ["select"],
|
|
431
433
|
setup(t, { emit: r }) {
|
|
432
|
-
const e = t, u = r,
|
|
433
|
-
...
|
|
434
|
-
isSelected: e.selectedDate ?
|
|
435
|
-
}))), d =
|
|
434
|
+
const e = t, u = r, s = Y(() => E(e.currentDate.getFullYear()).map((n) => ({
|
|
435
|
+
...n,
|
|
436
|
+
isSelected: e.selectedDate ? n.month === e.selectedDate.getMonth() && n.year === e.selectedDate.getFullYear() : !1
|
|
437
|
+
}))), d = Y(() => {
|
|
436
438
|
const a = [];
|
|
437
|
-
for (let
|
|
438
|
-
a.push(
|
|
439
|
+
for (let n = 0; n < s.value.length; n += 3)
|
|
440
|
+
a.push(s.value.slice(n, n + 3));
|
|
439
441
|
return a;
|
|
440
442
|
}), i = (a) => {
|
|
441
443
|
u("select", a.month);
|
|
442
444
|
};
|
|
443
|
-
return (a,
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
(v(!0),
|
|
447
|
-
key:
|
|
445
|
+
return (a, n) => (v(), D("div", Ce, [
|
|
446
|
+
p("table", He, [
|
|
447
|
+
p("tbody", Fe, [
|
|
448
|
+
(v(!0), D(C, null, H(d.value, (m, g) => (v(), D("tr", {
|
|
449
|
+
key: g,
|
|
448
450
|
class: "date-picker-months-row"
|
|
449
451
|
}, [
|
|
450
|
-
(v(!0),
|
|
451
|
-
key:
|
|
452
|
+
(v(!0), D(C, null, H(m, (l) => (v(), D("td", {
|
|
453
|
+
key: l.month,
|
|
452
454
|
class: "date-picker-month-cell"
|
|
453
455
|
}, [
|
|
454
|
-
|
|
455
|
-
class:
|
|
456
|
+
p("button", {
|
|
457
|
+
class: I([
|
|
456
458
|
"date-picker-month",
|
|
457
459
|
{
|
|
458
|
-
selected:
|
|
459
|
-
disabled:
|
|
460
|
+
selected: l.isSelected,
|
|
461
|
+
disabled: l.isDisabled
|
|
460
462
|
}
|
|
461
463
|
]),
|
|
462
|
-
onClick: (
|
|
463
|
-
disabled:
|
|
464
|
-
},
|
|
464
|
+
onClick: (b) => i(l),
|
|
465
|
+
disabled: l.isDisabled
|
|
466
|
+
}, x(l.name), 11, Pe)
|
|
465
467
|
]))), 128))
|
|
466
468
|
]))), 128))
|
|
467
469
|
])
|
|
468
470
|
])
|
|
469
471
|
]));
|
|
470
472
|
}
|
|
471
|
-
}), Ne = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"/></g></svg>', Ie = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"/></g></svg>', Ve = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-1.5a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9"/></svg>', Ge = { class: "date-picker-header" }, qe = ["disabled"], ze = ["innerHTML"], Be = ["innerHTML"], Le = ["disabled"],
|
|
473
|
+
}), Ne = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"/></g></svg>', Ie = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"/></g></svg>', Ve = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-1.5a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9"/></svg>', Ge = { class: "date-picker-header" }, qe = ["disabled"], ze = ["innerHTML"], Be = ["innerHTML"], Le = ["disabled"], Oe = ["innerHTML"], We = /* @__PURE__ */ q({
|
|
472
474
|
__name: "DatePickerHeader",
|
|
473
475
|
props: {
|
|
474
476
|
currentDate: {},
|
|
@@ -478,16 +480,16 @@ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"]
|
|
|
478
480
|
},
|
|
479
481
|
emits: ["prev", "next", "header-click", "current-date"],
|
|
480
482
|
setup(t, { emit: r }) {
|
|
481
|
-
const e = t, u = r,
|
|
482
|
-
const m = e.currentDate.getFullYear(),
|
|
483
|
+
const e = t, u = r, s = Y(() => {
|
|
484
|
+
const m = e.currentDate.getFullYear(), g = e.currentDate.getMonth();
|
|
483
485
|
switch (e.viewMode) {
|
|
484
486
|
case "date":
|
|
485
|
-
return `${
|
|
487
|
+
return `${A[g]} ${m}`;
|
|
486
488
|
case "year":
|
|
487
|
-
const
|
|
488
|
-
return `${
|
|
489
|
+
const l = Math.floor(m / 10) * 10, b = l + 9;
|
|
490
|
+
return `${l}–${b}`;
|
|
489
491
|
default:
|
|
490
|
-
return `${
|
|
492
|
+
return `${A[g]} ${m}`;
|
|
491
493
|
}
|
|
492
494
|
}), d = () => {
|
|
493
495
|
u("prev");
|
|
@@ -495,77 +497,77 @@ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"]
|
|
|
495
497
|
u("next");
|
|
496
498
|
}, a = () => {
|
|
497
499
|
u("header-click");
|
|
498
|
-
},
|
|
500
|
+
}, n = () => {
|
|
499
501
|
u("current-date");
|
|
500
502
|
};
|
|
501
|
-
return (m,
|
|
502
|
-
|
|
503
|
+
return (m, g) => (v(), D("div", Ge, [
|
|
504
|
+
p("button", {
|
|
503
505
|
class: "date-picker-title",
|
|
504
506
|
onClick: a,
|
|
505
507
|
type: "button"
|
|
506
|
-
},
|
|
507
|
-
|
|
508
|
+
}, x(s.value), 1),
|
|
509
|
+
p("button", {
|
|
508
510
|
class: "date-picker-nav-button ml-auto",
|
|
509
511
|
disabled: !m.canGoPrev,
|
|
510
512
|
onClick: d,
|
|
511
513
|
type: "button",
|
|
512
514
|
"aria-label": "Previous"
|
|
513
515
|
}, [
|
|
514
|
-
|
|
516
|
+
p("span", {
|
|
515
517
|
class: "date-picker-nav-icon",
|
|
516
518
|
innerHTML: o(Ne)
|
|
517
519
|
}, null, 8, ze)
|
|
518
520
|
], 8, qe),
|
|
519
|
-
|
|
521
|
+
p("button", {
|
|
520
522
|
class: "date-picker-nav-button",
|
|
521
|
-
onClick:
|
|
523
|
+
onClick: n,
|
|
522
524
|
type: "button",
|
|
523
525
|
"aria-label": "Current Date"
|
|
524
526
|
}, [
|
|
525
|
-
|
|
527
|
+
p("span", {
|
|
526
528
|
class: "date-picker-nav-icon",
|
|
527
529
|
innerHTML: o(Ve)
|
|
528
530
|
}, null, 8, Be)
|
|
529
531
|
]),
|
|
530
|
-
|
|
532
|
+
p("button", {
|
|
531
533
|
class: "date-picker-nav-button",
|
|
532
534
|
disabled: !m.canGoNext,
|
|
533
535
|
onClick: i,
|
|
534
536
|
type: "button",
|
|
535
537
|
"aria-label": "Next"
|
|
536
538
|
}, [
|
|
537
|
-
|
|
539
|
+
p("span", {
|
|
538
540
|
class: "date-picker-nav-icon",
|
|
539
541
|
innerHTML: o(Ie)
|
|
540
|
-
}, null, 8,
|
|
542
|
+
}, null, 8, Oe)
|
|
541
543
|
], 8, Le)
|
|
542
544
|
]));
|
|
543
545
|
}
|
|
544
546
|
});
|
|
545
|
-
function
|
|
546
|
-
const e =
|
|
547
|
+
function Ae(t, r) {
|
|
548
|
+
const e = N(/* @__PURE__ */ new Date()), u = N("date"), s = Y(() => t.value ? t.value instanceof Date ? t.value : W(t.value) : null), d = Y(() => {
|
|
547
549
|
if (!t.minDate) return !0;
|
|
548
|
-
const
|
|
549
|
-
if (!
|
|
550
|
-
const
|
|
551
|
-
return new Date($,
|
|
552
|
-
}), i =
|
|
550
|
+
const h = W(t.minDate);
|
|
551
|
+
if (!h) return !0;
|
|
552
|
+
const S = e.value.getFullYear(), $ = e.value.getMonth();
|
|
553
|
+
return new Date(S, $, 1) > h;
|
|
554
|
+
}), i = Y(() => {
|
|
553
555
|
if (!t.maxDate) return !0;
|
|
554
|
-
const
|
|
555
|
-
if (!
|
|
556
|
-
const
|
|
557
|
-
return new Date(
|
|
556
|
+
const h = W(t.maxDate);
|
|
557
|
+
if (!h) return !0;
|
|
558
|
+
const S = e.value.getFullYear(), $ = e.value.getMonth();
|
|
559
|
+
return new Date(S, $ + 1, 0) < h;
|
|
558
560
|
}), a = () => {
|
|
559
561
|
d.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() - 1, 1));
|
|
560
|
-
},
|
|
562
|
+
}, n = () => {
|
|
561
563
|
i.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() + 1, 1));
|
|
562
564
|
}, m = () => {
|
|
563
565
|
e.value = new Date(e.value.getFullYear() - 1, e.value.getMonth(), 1);
|
|
564
|
-
},
|
|
566
|
+
}, g = () => {
|
|
565
567
|
e.value = new Date(e.value.getFullYear() + 1, e.value.getMonth(), 1);
|
|
566
|
-
},
|
|
568
|
+
}, l = () => {
|
|
567
569
|
e.value = new Date(e.value.getFullYear() - 10, e.value.getMonth(), 1);
|
|
568
|
-
},
|
|
570
|
+
}, b = () => {
|
|
569
571
|
e.value = new Date(e.value.getFullYear() + 10, e.value.getMonth(), 1);
|
|
570
572
|
}, k = () => {
|
|
571
573
|
e.value = /* @__PURE__ */ new Date(), u.value = "date";
|
|
@@ -578,43 +580,49 @@ function Oe(t, r) {
|
|
|
578
580
|
u.value = "date";
|
|
579
581
|
break;
|
|
580
582
|
}
|
|
581
|
-
}, c = (
|
|
582
|
-
t.mode === "dateTime" &&
|
|
583
|
-
},
|
|
584
|
-
|
|
585
|
-
},
|
|
586
|
-
e.value = new Date(e.value.getFullYear(),
|
|
587
|
-
},
|
|
588
|
-
e.value = new Date(
|
|
589
|
-
},
|
|
590
|
-
const
|
|
591
|
-
|
|
583
|
+
}, c = (h) => {
|
|
584
|
+
t.mode === "dateTime" && s.value && h.setHours(s.value.getHours(), s.value.getMinutes()), F(h);
|
|
585
|
+
}, y = (h) => {
|
|
586
|
+
F(h);
|
|
587
|
+
}, M = (h) => {
|
|
588
|
+
e.value = new Date(e.value.getFullYear(), h, 1), u.value = "date", t.mode === "month" && F(new Date(e.value.getFullYear(), h, 1));
|
|
589
|
+
}, P = (h) => {
|
|
590
|
+
e.value = new Date(h, e.value.getMonth(), 1), u.value = "date";
|
|
591
|
+
}, w = (h) => {
|
|
592
|
+
const S = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/, $ = /^\d{4}-\d{2}-\d{2}$/;
|
|
593
|
+
return S.test(h) ? h.includes(".") ? "YYYY-MM-DDTHH:mm:ss.sssZ" : "YYYY-MM-DDTHH:mm:ssZ" : $.test(h) ? "YYYY-MM-DD" : t.format || "YYYY-MM-DD";
|
|
594
|
+
}, T = (h, S) => {
|
|
595
|
+
const $ = w(S);
|
|
596
|
+
return $.includes("T") ? $.includes(".sss") ? h.toISOString() : h.toISOString().replace(/\.\d{3}Z$/, "Z") : U(h, $);
|
|
597
|
+
}, F = (h) => {
|
|
598
|
+
let S;
|
|
599
|
+
typeof t.value == "string" ? S = T(h, t.value) : S = h, r("update:value", S), r("change", S), r("select", S);
|
|
592
600
|
};
|
|
593
601
|
return {
|
|
594
602
|
currentDate: e,
|
|
595
603
|
viewMode: u,
|
|
596
|
-
selectedDate:
|
|
604
|
+
selectedDate: s,
|
|
597
605
|
canGoPrev: d,
|
|
598
606
|
canGoNext: i,
|
|
599
607
|
goToPrevMonth: a,
|
|
600
|
-
goToNextMonth:
|
|
608
|
+
goToNextMonth: n,
|
|
601
609
|
goToPrevYear: m,
|
|
602
|
-
goToNextYear:
|
|
603
|
-
goToPrevDecade:
|
|
604
|
-
goToNextDecade:
|
|
610
|
+
goToNextYear: g,
|
|
611
|
+
goToPrevDecade: l,
|
|
612
|
+
goToNextDecade: b,
|
|
605
613
|
goToCurrentDate: k,
|
|
606
614
|
onHeaderClick: f,
|
|
607
615
|
onDateSelect: c,
|
|
608
|
-
onWeekSelect:
|
|
609
|
-
onMonthSelect:
|
|
610
|
-
onYearSelect:
|
|
611
|
-
emitValue:
|
|
616
|
+
onWeekSelect: y,
|
|
617
|
+
onMonthSelect: M,
|
|
618
|
+
onYearSelect: P,
|
|
619
|
+
emitValue: F
|
|
612
620
|
};
|
|
613
621
|
}
|
|
614
|
-
const Je = { class: "date-picker" },
|
|
622
|
+
const Je = { class: "date-picker" }, Re = {
|
|
615
623
|
key: 0,
|
|
616
624
|
class: "date-picker-time-section"
|
|
617
|
-
},
|
|
625
|
+
}, Ze = /* @__PURE__ */ q({
|
|
618
626
|
__name: "DatePicker",
|
|
619
627
|
props: {
|
|
620
628
|
value: {},
|
|
@@ -630,105 +638,109 @@ const Je = { class: "date-picker" }, Ue = {
|
|
|
630
638
|
},
|
|
631
639
|
emits: ["update:value", "change", "select"],
|
|
632
640
|
setup(t, { emit: r }) {
|
|
633
|
-
const e = t, u = r,
|
|
641
|
+
const e = t, u = r, s = N(null), d = N(0), {
|
|
634
642
|
currentDate: i,
|
|
635
643
|
viewMode: a,
|
|
636
|
-
selectedDate:
|
|
644
|
+
selectedDate: n,
|
|
637
645
|
canGoPrev: m,
|
|
638
|
-
canGoNext:
|
|
639
|
-
goToPrevMonth:
|
|
640
|
-
goToNextMonth:
|
|
646
|
+
canGoNext: g,
|
|
647
|
+
goToPrevMonth: l,
|
|
648
|
+
goToNextMonth: b,
|
|
641
649
|
goToPrevYear: k,
|
|
642
650
|
goToNextYear: f,
|
|
643
651
|
goToPrevDecade: c,
|
|
644
|
-
goToNextDecade:
|
|
645
|
-
goToCurrentDate:
|
|
646
|
-
onHeaderClick:
|
|
647
|
-
onDateSelect:
|
|
648
|
-
onWeekSelect:
|
|
649
|
-
onMonthSelect:
|
|
650
|
-
onYearSelect:
|
|
651
|
-
emitValue:
|
|
652
|
-
} =
|
|
653
|
-
|
|
652
|
+
goToNextDecade: y,
|
|
653
|
+
goToCurrentDate: M,
|
|
654
|
+
onHeaderClick: P,
|
|
655
|
+
onDateSelect: w,
|
|
656
|
+
onWeekSelect: T,
|
|
657
|
+
onMonthSelect: F,
|
|
658
|
+
onYearSelect: h,
|
|
659
|
+
emitValue: S
|
|
660
|
+
} = Ae(e, u), $ = (_) => {
|
|
661
|
+
if (e.mode === "dateTime" && n.value) {
|
|
662
|
+
const V = new Date(n.value.getTime());
|
|
663
|
+
V.setHours(_.getHours(), _.getMinutes(), 0, 0), S(V);
|
|
664
|
+
} else
|
|
665
|
+
S(_);
|
|
654
666
|
};
|
|
655
|
-
return
|
|
656
|
-
|
|
657
|
-
|
|
667
|
+
return R(async () => {
|
|
668
|
+
B(() => {
|
|
669
|
+
s.value && (d.value = s.value.clientHeight);
|
|
658
670
|
});
|
|
659
|
-
}), (
|
|
660
|
-
|
|
671
|
+
}), (_, V) => (v(), D("div", Je, [
|
|
672
|
+
_.mode !== "time" ? (v(), z(We, {
|
|
661
673
|
key: 0,
|
|
662
674
|
"current-date": o(i),
|
|
663
675
|
"view-mode": o(a),
|
|
664
676
|
"can-go-prev": o(m),
|
|
665
|
-
"can-go-next": o(
|
|
666
|
-
onPrev:
|
|
667
|
-
onNext:
|
|
668
|
-
onHeaderClick: o(
|
|
669
|
-
onCurrentDate: o(
|
|
670
|
-
}, null, 8, ["current-date", "view-mode", "can-go-prev", "can-go-next", "onHeaderClick", "onCurrentDate"])) :
|
|
671
|
-
|
|
672
|
-
class:
|
|
673
|
-
"date-picker-datetime-layout":
|
|
677
|
+
"can-go-next": o(g),
|
|
678
|
+
onPrev: V[0] || (V[0] = (K) => o(a) === "year" ? o(c)() : o(a) === "month" ? o(k)() : o(l)()),
|
|
679
|
+
onNext: V[1] || (V[1] = (K) => o(a) === "year" ? o(y)() : o(a) === "month" ? o(f)() : o(b)()),
|
|
680
|
+
onHeaderClick: o(P),
|
|
681
|
+
onCurrentDate: o(M)
|
|
682
|
+
}, null, 8, ["current-date", "view-mode", "can-go-prev", "can-go-next", "onHeaderClick", "onCurrentDate"])) : G("", !0),
|
|
683
|
+
p("div", {
|
|
684
|
+
class: I({
|
|
685
|
+
"date-picker-datetime-layout": _.mode === "dateTime" && o(a) === "date"
|
|
674
686
|
}),
|
|
675
|
-
style:
|
|
687
|
+
style: Q({
|
|
676
688
|
height: d.value !== 0 ? d.value + "px" : "100%"
|
|
677
689
|
})
|
|
678
690
|
}, [
|
|
679
|
-
|
|
691
|
+
p("div", {
|
|
680
692
|
class: "date-picker-date-section",
|
|
681
693
|
ref_key: "datePickerContent",
|
|
682
|
-
ref:
|
|
694
|
+
ref: s
|
|
683
695
|
}, [
|
|
684
|
-
o(a) === "date" && (
|
|
696
|
+
o(a) === "date" && (_.mode === "date" || _.mode === "dateTime") ? (v(), z(ce, {
|
|
685
697
|
key: 0,
|
|
686
698
|
"current-date": o(i),
|
|
687
|
-
"selected-date": o(
|
|
688
|
-
"min-date":
|
|
689
|
-
"max-date":
|
|
690
|
-
"disabled-dates":
|
|
691
|
-
onSelect: o(
|
|
692
|
-
}, null, 8, ["current-date", "selected-date", "min-date", "max-date", "disabled-dates", "onSelect"])) :
|
|
693
|
-
|
|
699
|
+
"selected-date": o(n),
|
|
700
|
+
"min-date": _.minDate,
|
|
701
|
+
"max-date": _.maxDate,
|
|
702
|
+
"disabled-dates": _.disabledDates,
|
|
703
|
+
onSelect: o(w)
|
|
704
|
+
}, null, 8, ["current-date", "selected-date", "min-date", "max-date", "disabled-dates", "onSelect"])) : G("", !0),
|
|
705
|
+
_.mode === "week" && o(a) === "date" ? (v(), z(De, {
|
|
694
706
|
key: 1,
|
|
695
707
|
"current-date": o(i),
|
|
696
|
-
"selected-date": o(
|
|
697
|
-
onSelect: o(
|
|
698
|
-
}, null, 8, ["current-date", "selected-date", "onSelect"])) :
|
|
699
|
-
o(a) !== "year" && (o(a) === "month" ||
|
|
708
|
+
"selected-date": o(n),
|
|
709
|
+
onSelect: o(T)
|
|
710
|
+
}, null, 8, ["current-date", "selected-date", "onSelect"])) : G("", !0),
|
|
711
|
+
o(a) !== "year" && (o(a) === "month" || _.mode === "month") ? (v(), z(xe, {
|
|
700
712
|
key: 2,
|
|
701
713
|
"current-date": o(i),
|
|
702
|
-
"selected-date": o(
|
|
703
|
-
onSelect: o(
|
|
704
|
-
}, null, 8, ["current-date", "selected-date", "onSelect"])) :
|
|
705
|
-
o(a) === "year" ? (v(),
|
|
714
|
+
"selected-date": o(n),
|
|
715
|
+
onSelect: o(F)
|
|
716
|
+
}, null, 8, ["current-date", "selected-date", "onSelect"])) : G("", !0),
|
|
717
|
+
o(a) === "year" ? (v(), z(Te, {
|
|
706
718
|
key: 3,
|
|
707
719
|
"current-date": o(i),
|
|
708
|
-
"selected-date": o(
|
|
709
|
-
onSelect: o(
|
|
710
|
-
onMonthSelect: o(
|
|
711
|
-
}, null, 8, ["current-date", "selected-date", "onSelect", "onMonthSelect"])) :
|
|
720
|
+
"selected-date": o(n),
|
|
721
|
+
onSelect: o(h),
|
|
722
|
+
onMonthSelect: o(F)
|
|
723
|
+
}, null, 8, ["current-date", "selected-date", "onSelect", "onMonthSelect"])) : G("", !0)
|
|
712
724
|
], 512),
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
"selected-time": o(
|
|
716
|
-
"time-format":
|
|
717
|
-
"time-interval":
|
|
718
|
-
onUpdate:
|
|
725
|
+
_.mode === "dateTime" && o(a) === "date" ? (v(), D("div", Re, [
|
|
726
|
+
X(J, {
|
|
727
|
+
"selected-time": o(n),
|
|
728
|
+
"time-format": _.timeFormat,
|
|
729
|
+
"time-interval": _.timeInterval,
|
|
730
|
+
onUpdate: $
|
|
719
731
|
}, null, 8, ["selected-time", "time-format", "time-interval"])
|
|
720
|
-
])) :
|
|
732
|
+
])) : G("", !0)
|
|
721
733
|
], 6),
|
|
722
|
-
|
|
734
|
+
_.mode === "time" ? (v(), z(J, {
|
|
723
735
|
key: 1,
|
|
724
|
-
"selected-time": o(
|
|
725
|
-
"time-format":
|
|
726
|
-
"time-interval":
|
|
727
|
-
onUpdate:
|
|
728
|
-
}, null, 8, ["selected-time", "time-format", "time-interval"])) :
|
|
736
|
+
"selected-time": o(n),
|
|
737
|
+
"time-format": _.timeFormat,
|
|
738
|
+
"time-interval": _.timeInterval,
|
|
739
|
+
onUpdate: $
|
|
740
|
+
}, null, 8, ["selected-time", "time-format", "time-interval"])) : G("", !0)
|
|
729
741
|
]));
|
|
730
742
|
}
|
|
731
743
|
});
|
|
732
744
|
export {
|
|
733
|
-
|
|
745
|
+
Ze as default
|
|
734
746
|
};
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--date-picker-primary: #
|
|
1
|
+
:root{--date-picker-primary: #2d66ed;--date-picker-primary-fg: #ffffff;--date-picker-text: inherit;--date-picker-border: #00000020;--date-picker-secondary: #00000010;--date-picker-hover: #00000010;--date-picker-disabled: #000000b4;--date-picker-today: #00000010;--date-picker-radius: .375em}.ml-auto{margin-left:auto}.date-picker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--date-picker-text)}.date-picker-content{padding:0 .5em .5em}.date-picker-table{width:100%;border-collapse:collapse;border-spacing:0;margin:0}.date-picker-table:not(.date-picker-week-table) .date-picker-day-cell{padding:.13em}td,th{padding:0;margin:0;border:none}.date-picker-weekdays-row th{padding:.6em 0;font-size:.78em}.date-picker-weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:500;opacity:.5;padding:.25em}.date-picker-days-body tr{border:none}.date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;height:2em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:.95em;color:var(--date-picker-text)}.date-picker-day:hover{background:var(--date-picker-hover)}.date-picker-day.other-month{opacity:.4}.date-picker-day.today{background:var(--date-picker-today);font-weight:400}.date-picker-day.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-day.disabled{cursor:not-allowed;opacity:.5}.date-picker-day.disabled:hover{background:none}.date-picker-datetime-layout{display:flex;gap:.65em;width:100%}.date-picker-date-section{flex:1;height:100%}.date-picker-datetime-layout .date-picker-date-section{width:75%}.date-picker-time-section{width:100%;max-width:74px;border-left:1px solid var(--date-picker-border);display:flex;flex-direction:column}.date-picker-time-section .time-picker-container{flex:1;overflow-y:auto}.date-picker-week-table .date-picker-week-row{cursor:pointer}.date-picker-week-table .date-picker-week-row:not(.selected):hover td{background:var(--date-picker-hover)}.date-picker-week-table td{border-radius:0;padding:0}.date-picker-week-table .date-picker-day-cell .date-picker-day{border-radius:0}.date-picker-week-header{text-align:center}.date-picker-week-row .date-picker-week-number-cell{height:90%;padding-right:5px;background:var(--date-picker-secondary);opacity:.7;border-bottom:1px solid var(--date-picker-border);text-align:center;width:2.5em;font-size:.8em}.date-picker-week-row:last-child .date-picker-week-number-cell{border-bottom:none}.date-picker-week-row.selected .date-picker-day{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-months-table{width:100%}.date-picker-months-body .date-picker-month-cell{padding:2px}.date-picker-month{display:flex;align-items:center;justify-content:center;width:100%;height:2.5em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:inherit;color:var(--date-picker-text)}.date-picker-month:hover{background:var(--date-picker-hover)}.date-picker-month.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-view-layout{display:flex;gap:1px;height:100%;padding-right:2px}.years-section{width:25%;min-width:60px;max-width:80px;border-right:1px solid var(--date-picker-border);display:flex;flex-direction:column;height:100%}.years-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.year-item{display:flex;align-items:center;justify-content:center;padding:.5em;border:none;background:none;cursor:pointer;font-size:.875em;color:var(--date-picker-text);transition:background-color .15s ease;white-space:nowrap;flex-shrink:0}.year-item:hover{background:var(--date-picker-hover)}.year-item.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-item.current{font-weight:600}.months-section{width:75%;display:flex;flex-direction:column;height:100%}.months-section .date-picker-months-table{overflow:auto;flex:1}.year-view-layout .months-section{padding:5px 3px;height:94.5%}.time-picker-container{height:100%;display:flex;flex-direction:column}.time-wheel{height:100%;overflow-y:auto;display:flex;flex-direction:column;border:1px solid var(--date-picker-border);border-radius:var(--date-picker-radius)}.time-option{height:30px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;font-size:.875em;color:var(--date-picker-text);flex-shrink:0}.time-option:hover{background:var(--date-picker-hover)}.time-option.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg);font-weight:500}.date-picker-time-section .time-wheel{border:none;border-radius:0;height:100%;max-height:none}.date-picker-header{display:flex;align-items:center;justify-content:space-between;padding:.45em .4em;gap:.2em;border-bottom:1px solid var(--date-picker-border)}.date-picker-nav-button{display:flex;align-items:center;justify-content:center;width:1.65em;height:1.65em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;transition:background-color .15s ease;opacity:.7}.date-picker-nav-button:hover:not(:disabled){background:var(--date-picker-hover)}.date-picker-nav-button:disabled{opacity:.5;cursor:not-allowed}.date-picker-nav-icon,.date-picker-header *{color:inherit!important}.date-picker-nav-icon svg{width:1.3em;height:1.3em;color:inherit!important;fill:currentColor!important}.date-picker-title{font-weight:600;font-size:1em;cursor:pointer;padding:.25em .5em;border-radius:var(--date-picker-radius);transition:background-color .15s ease;border:none;background:none;color:inherit}.date-picker-title:hover{background:var(--date-picker-hover)}.date-picker svg{display:flex;color:inherit}.date-picker *::-webkit-scrollbar{height:3px;width:3px}.date-picker *::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.date-picker *::-webkit-scrollbar-track:hover{background-color:transparent}.date-picker *::-webkit-scrollbar-track:active{background-color:transparent}.date-picker *::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:hover{background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:active{background-color:var(--date-picker-border)}
|