v-datepicker-lite 0.0.2 → 0.0.3
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 +64 -75
- package/index.js +43 -104
- package/package.json +9 -3
- package/style.css +1 -1
- package/types/index.d.ts +36 -36
package/README.md
CHANGED
|
@@ -4,13 +4,13 @@ A lightweight and customizable Vue 3 date picker component with support for date
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
7
|
+
- **Multiple Selection Modes**: Supports `date`, `time`, `dateTime`, `week`, and `month` modes.
|
|
8
|
+
- **Responsive Design**: Adapts to various screen sizes with a clean, modern UI.
|
|
9
|
+
- **Accessibility**: Includes ARIA attributes and keyboard navigation for enhanced usability.
|
|
10
|
+
- **Customizable**: Flexible props for date format, time format, min/max dates, disabled dates, and more.
|
|
11
|
+
- **Time Selection**: Supports 12h/24h formats with customizable time intervals (15, 30, or 60 minutes).
|
|
12
|
+
- **Performance Optimized**: Uses Vue 3 composition API for efficient rendering and state management.
|
|
13
|
+
- **TypeScript Support**: Fully typed with TypeScript for better developer experience.
|
|
14
14
|
|
|
15
15
|
## Demo
|
|
16
16
|
|
|
@@ -47,16 +47,14 @@ const selectedDate = (ref < Date) | (null > null)
|
|
|
47
47
|
</script>
|
|
48
48
|
|
|
49
49
|
<template>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</p>
|
|
59
|
-
</div>
|
|
50
|
+
<div>
|
|
51
|
+
<h3>Date Picker</h3>
|
|
52
|
+
<DatePicker v-model:value="selectedDate" mode="date" />
|
|
53
|
+
<p>
|
|
54
|
+
Selected:
|
|
55
|
+
{{ selectedDate ? selectedDate.toLocaleDateString() : 'None' }}
|
|
56
|
+
</p>
|
|
57
|
+
</div>
|
|
60
58
|
</template>
|
|
61
59
|
```
|
|
62
60
|
|
|
@@ -73,16 +71,14 @@ const selectedWeek = (ref < Date) | (null > null)
|
|
|
73
71
|
</script>
|
|
74
72
|
|
|
75
73
|
<template>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</p>
|
|
85
|
-
</div>
|
|
74
|
+
<div>
|
|
75
|
+
<h3>Week Picker</h3>
|
|
76
|
+
<DatePicker v-model:value="selectedWeek" mode="week" />
|
|
77
|
+
<p>
|
|
78
|
+
Selected:
|
|
79
|
+
{{ selectedWeek ? selectedWeek.toLocaleDateString() : 'None' }}
|
|
80
|
+
</p>
|
|
81
|
+
</div>
|
|
86
82
|
</template>
|
|
87
83
|
```
|
|
88
84
|
|
|
@@ -99,16 +95,14 @@ const selectedMonth = (ref < Date) | (null > null)
|
|
|
99
95
|
</script>
|
|
100
96
|
|
|
101
97
|
<template>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
</p>
|
|
111
|
-
</div>
|
|
98
|
+
<div>
|
|
99
|
+
<h3>Month Picker</h3>
|
|
100
|
+
<DatePicker v-model:value="selectedMonth" mode="month" />
|
|
101
|
+
<p>
|
|
102
|
+
Selected:
|
|
103
|
+
{{ selectedMonth ? selectedMonth.toLocaleDateString() : 'None' }}
|
|
104
|
+
</p>
|
|
105
|
+
</div>
|
|
112
106
|
</template>
|
|
113
107
|
```
|
|
114
108
|
|
|
@@ -125,18 +119,18 @@ const selectedDateTime = (ref < Date) | (null > null)
|
|
|
125
119
|
</script>
|
|
126
120
|
|
|
127
121
|
<template>
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
122
|
+
<div>
|
|
123
|
+
<h3>DateTime Picker</h3>
|
|
124
|
+
<DatePicker
|
|
125
|
+
v-model:value="selectedDateTime"
|
|
126
|
+
mode="dateTime"
|
|
127
|
+
time-format="12h"
|
|
128
|
+
time-interval="15" />
|
|
129
|
+
<p>
|
|
130
|
+
Selected:
|
|
131
|
+
{{ selectedDateTime ? selectedDateTime.toLocaleString() : 'None' }}
|
|
132
|
+
</p>
|
|
133
|
+
</div>
|
|
140
134
|
</template>
|
|
141
135
|
```
|
|
142
136
|
|
|
@@ -153,21 +147,18 @@ const selectedDate = (ref < Date) | (null > null)
|
|
|
153
147
|
</script>
|
|
154
148
|
|
|
155
149
|
<template>
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
{{ selectedDate ? selectedDate.toLocaleDateString() : 'None' }}
|
|
169
|
-
</p>
|
|
170
|
-
</div>
|
|
150
|
+
<div>
|
|
151
|
+
<h3>Restricted Date Picker</h3>
|
|
152
|
+
<DatePicker
|
|
153
|
+
v-model:value="selectedDate"
|
|
154
|
+
mode="date"
|
|
155
|
+
:min-date="new Date().toISOString().split('T')[0]"
|
|
156
|
+
:disabled-dates="[{ start: '2025-08-15', end: '2025-08-20' }, { start: '2025-08-25' }]" />
|
|
157
|
+
<p>
|
|
158
|
+
Selected:
|
|
159
|
+
{{ selectedDate ? selectedDate.toLocaleDateString() : 'None' }}
|
|
160
|
+
</p>
|
|
161
|
+
</div>
|
|
171
162
|
</template>
|
|
172
163
|
```
|
|
173
164
|
|
|
@@ -200,17 +191,15 @@ Customize the appearance using the following CSS variables defined in `style.css
|
|
|
200
191
|
|
|
201
192
|
```css
|
|
202
193
|
:root {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
--date-picker-radius: 0.375em; /* Border radius */
|
|
213
|
-
--date-picker-hover: #f3f4f6; /* Hover background color */
|
|
194
|
+
--date-picker-primary: #4f46e5; /* Primary color for selected items */
|
|
195
|
+
--date-picker-primary-fg: #ffffff; /* Foreground color for selected items */
|
|
196
|
+
--date-picker-text: #374151; /* Text color */
|
|
197
|
+
--date-picker-border: #d1d5db; /* Border color */
|
|
198
|
+
--date-picker-secondary: #f7f7f9; /* Secondary background color */
|
|
199
|
+
--date-picker-disabled: #9ca3af; /* Disabled item color */
|
|
200
|
+
--date-picker-today: #fef3c7; /* Today highlight color */
|
|
201
|
+
--date-picker-radius: 0.375em; /* Border radius */
|
|
202
|
+
--date-picker-hover: #f3f4f6; /* Hover background color */
|
|
214
203
|
}
|
|
215
204
|
```
|
|
216
205
|
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as I, computed as S, createElementBlock as p, openBlock as v, createElementVNode as h, Fragment as Y, renderList as T, unref as o, toDisplayString as P, normalizeClass as x, ref as F, watch as L, nextTick as
|
|
1
|
+
import { defineComponent as I, computed as S, createElementBlock as p, openBlock as v, createElementVNode as h, Fragment as Y, renderList as T, unref as o, toDisplayString as P, normalizeClass as x, ref as F, watch as L, nextTick as G, onMounted as U, createBlock as V, createCommentVNode as N, normalizeStyle as X, createVNode as Z } from "vue";
|
|
2
2
|
const R = (t, r = "YYYY-MM-DD") => {
|
|
3
3
|
const e = t.getFullYear(), u = String(t.getMonth() + 1).padStart(2, "0"), n = String(t.getDate()).padStart(2, "0"), d = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0");
|
|
4
4
|
return r.replace("YYYY", e.toString()).replace("MM", u).replace("DD", n).replace("HH", d).replace("mm", i);
|
|
@@ -6,7 +6,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
6
6
|
if (!t) return null;
|
|
7
7
|
const r = new Date(t);
|
|
8
8
|
return isNaN(r.getTime()) ? null : r;
|
|
9
|
-
},
|
|
9
|
+
}, q = (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
12
|
}, E = (t, r) => {
|
|
@@ -19,7 +19,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
19
19
|
month: l,
|
|
20
20
|
year: m,
|
|
21
21
|
isCurrentMonth: !1,
|
|
22
|
-
isToday:
|
|
22
|
+
isToday: q(c, a),
|
|
23
23
|
isSelected: !1,
|
|
24
24
|
isDisabled: !1
|
|
25
25
|
});
|
|
@@ -32,7 +32,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
32
32
|
month: r,
|
|
33
33
|
year: t,
|
|
34
34
|
isCurrentMonth: !0,
|
|
35
|
-
isToday:
|
|
35
|
+
isToday: q(c, a),
|
|
36
36
|
isSelected: !1,
|
|
37
37
|
isDisabled: !1
|
|
38
38
|
});
|
|
@@ -46,7 +46,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
46
46
|
month: M,
|
|
47
47
|
year: k,
|
|
48
48
|
isCurrentMonth: !1,
|
|
49
|
-
isToday:
|
|
49
|
+
isToday: q(c, a),
|
|
50
50
|
isSelected: !1,
|
|
51
51
|
isDisabled: !1
|
|
52
52
|
});
|
|
@@ -98,15 +98,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
98
98
|
"October",
|
|
99
99
|
"November",
|
|
100
100
|
"December"
|
|
101
|
-
], K = [
|
|
102
|
-
"Sun",
|
|
103
|
-
"Mon",
|
|
104
|
-
"Tue",
|
|
105
|
-
"Wed",
|
|
106
|
-
"Thu",
|
|
107
|
-
"Fri",
|
|
108
|
-
"Sat"
|
|
109
|
-
], ne = { class: "date-picker-content" }, le = { class: "date-picker-table" }, se = { class: "date-picker-weekdays-row" }, re = { class: "date-picker-days-body" }, oe = ["onClick", "disabled"], ce = /* @__PURE__ */ I({
|
|
101
|
+
], K = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], ne = { class: "date-picker-content" }, le = { class: "date-picker-table" }, se = { class: "date-picker-weekdays-row" }, re = { class: "date-picker-days-body" }, oe = ["onClick", "disabled"], ce = /* @__PURE__ */ I({
|
|
110
102
|
__name: "DateView",
|
|
111
103
|
props: {
|
|
112
104
|
currentDate: {},
|
|
@@ -117,18 +109,10 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
117
109
|
},
|
|
118
110
|
emits: ["select"],
|
|
119
111
|
setup(t, { emit: r }) {
|
|
120
|
-
const e = t, u = r, n = S(() => E(
|
|
121
|
-
e.currentDate.getFullYear(),
|
|
122
|
-
e.currentDate.getMonth()
|
|
123
|
-
).map((l) => ({
|
|
112
|
+
const e = t, u = r, n = S(() => E(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((l) => ({
|
|
124
113
|
...l,
|
|
125
|
-
isSelected: e.selectedDate ?
|
|
126
|
-
isDisabled: ae(
|
|
127
|
-
l.date,
|
|
128
|
-
e.minDate,
|
|
129
|
-
e.maxDate,
|
|
130
|
-
e.disabledDates
|
|
131
|
-
)
|
|
114
|
+
isSelected: e.selectedDate ? q(l.date, e.selectedDate) : !1,
|
|
115
|
+
isDisabled: ae(l.date, e.minDate, e.maxDate, e.disabledDates)
|
|
132
116
|
}))), d = S(() => {
|
|
133
117
|
const a = [];
|
|
134
118
|
for (let l = 0; l < n.value.length; l += 7)
|
|
@@ -184,13 +168,8 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
184
168
|
},
|
|
185
169
|
emits: ["select"],
|
|
186
170
|
setup(t, { emit: r }) {
|
|
187
|
-
const e = t, u = r, n = S(() => te(
|
|
188
|
-
e.
|
|
189
|
-
e.currentDate.getMonth()
|
|
190
|
-
).map((a) => {
|
|
191
|
-
const l = e.selectedDate ? a.days.some(
|
|
192
|
-
(m) => G(m.date, e.selectedDate)
|
|
193
|
-
) : !1;
|
|
171
|
+
const e = t, u = r, n = S(() => te(e.currentDate.getFullYear(), e.currentDate.getMonth()).map((a) => {
|
|
172
|
+
const l = e.selectedDate ? a.days.some((m) => q(m.date, e.selectedDate)) : !1;
|
|
194
173
|
return {
|
|
195
174
|
...a,
|
|
196
175
|
isSelected: l
|
|
@@ -204,7 +183,7 @@ const R = (t, r = "YYYY-MM-DD") => {
|
|
|
204
183
|
h("table", ue, [
|
|
205
184
|
h("thead", null, [
|
|
206
185
|
h("tr", de, [
|
|
207
|
-
a[0] || (a[0] = h("th", { class: "date-picker-weekday date-picker-week-header" }, "
|
|
186
|
+
a[0] || (a[0] = h("th", { class: "date-picker-weekday date-picker-week-header" }, "Wk", -1)),
|
|
208
187
|
(v(!0), p(Y, null, T(o(K), (l) => (v(), p("th", { key: l }, P(l), 1))), 128))
|
|
209
188
|
])
|
|
210
189
|
]),
|
|
@@ -259,15 +238,10 @@ function De(t, r = "24h", e = 15, u) {
|
|
|
259
238
|
const C = a.value ? y === 0 ? " AM" : " PM" : "";
|
|
260
239
|
for (let _ = b; _ <= (a.value ? 12 : 23); _++)
|
|
261
240
|
for (let g = 0; g < 60; g += e) {
|
|
262
|
-
const $ = (a.value, _), H = a.value ? _ === 12 ? y === 0 ? 0 : 12 : _ + y * 12 : _,
|
|
263
|
-
2,
|
|
264
|
-
"0"
|
|
265
|
-
)}:${String(g).padStart(2, "0")}` + C;
|
|
241
|
+
const $ = (a.value, _), H = a.value ? _ === 12 ? y === 0 ? 0 : 12 : _ + y * 12 : _, z = `${String($).padStart(2, "0")}:${String(g).padStart(2, "0")}` + C;
|
|
266
242
|
c.push({
|
|
267
|
-
display:
|
|
268
|
-
value: `${String(H).padStart(2, "0")}:${String(
|
|
269
|
-
g
|
|
270
|
-
).padStart(2, "0")}`,
|
|
243
|
+
display: z,
|
|
244
|
+
value: `${String(H).padStart(2, "0")}:${String(g).padStart(2, "0")}`,
|
|
271
245
|
hour: H,
|
|
272
246
|
minute: g
|
|
273
247
|
});
|
|
@@ -277,13 +251,12 @@ function De(t, r = "24h", e = 15, u) {
|
|
|
277
251
|
}, s = () => {
|
|
278
252
|
if (a.value) {
|
|
279
253
|
const c = n.value === 0 ? 12 : n.value > 12 ? n.value - 12 : n.value, b = n.value < 12 ? " AM" : " PM";
|
|
280
|
-
return `${String(c).padStart(2, "0")}:${String(
|
|
281
|
-
|
|
282
|
-
|
|
254
|
+
return `${String(c).padStart(2, "0")}:${String(d.value).padStart(
|
|
255
|
+
2,
|
|
256
|
+
"0"
|
|
257
|
+
)}${b}`;
|
|
283
258
|
}
|
|
284
|
-
return `${String(n.value).padStart(2, "0")}:${String(
|
|
285
|
-
d.value
|
|
286
|
-
).padStart(2, "0")}`;
|
|
259
|
+
return `${String(n.value).padStart(2, "0")}:${String(d.value).padStart(2, "0")}`;
|
|
287
260
|
};
|
|
288
261
|
return {
|
|
289
262
|
hours: n,
|
|
@@ -309,9 +282,7 @@ function De(t, r = "24h", e = 15, u) {
|
|
|
309
282
|
},
|
|
310
283
|
scrollToSelected: (c) => {
|
|
311
284
|
if (!c) return;
|
|
312
|
-
const b = i.value.findIndex(
|
|
313
|
-
(y) => y === s()
|
|
314
|
-
);
|
|
285
|
+
const b = i.value.findIndex((y) => y === s());
|
|
315
286
|
if (b >= 0) {
|
|
316
287
|
const C = c.clientHeight, _ = b * 30 - C / 2 + 30 / 2;
|
|
317
288
|
c.scrollTop = Math.max(0, _);
|
|
@@ -331,18 +302,11 @@ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"]
|
|
|
331
302
|
},
|
|
332
303
|
emits: ["update"],
|
|
333
304
|
setup(t, { emit: r }) {
|
|
334
|
-
const e = t, u = r, n = F(null), {
|
|
335
|
-
timeOptions: d,
|
|
336
|
-
initializeTime: i,
|
|
337
|
-
updateTime: a,
|
|
338
|
-
getCurrentTimeString: l,
|
|
339
|
-
selectTime: m,
|
|
340
|
-
scrollToSelected: D
|
|
341
|
-
} = De(e.selectedTime, e.timeFormat, e.timeInterval, u);
|
|
305
|
+
const e = t, u = r, n = F(null), { timeOptions: d, initializeTime: i, updateTime: a, getCurrentTimeString: l, selectTime: m, scrollToSelected: D } = De(e.selectedTime, e.timeFormat, e.timeInterval, u);
|
|
342
306
|
return L(
|
|
343
307
|
() => e.selectedTime,
|
|
344
308
|
(s) => {
|
|
345
|
-
a(s),
|
|
309
|
+
a(s), G(() => {
|
|
346
310
|
D(n.value);
|
|
347
311
|
});
|
|
348
312
|
},
|
|
@@ -350,19 +314,19 @@ const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"]
|
|
|
350
314
|
), L(
|
|
351
315
|
() => e.timeFormat,
|
|
352
316
|
() => {
|
|
353
|
-
i(),
|
|
317
|
+
i(), G(() => {
|
|
354
318
|
D(n.value);
|
|
355
319
|
});
|
|
356
320
|
}
|
|
357
321
|
), L(
|
|
358
322
|
() => e.timeInterval,
|
|
359
323
|
() => {
|
|
360
|
-
i(),
|
|
324
|
+
i(), G(() => {
|
|
361
325
|
D(n.value);
|
|
362
326
|
});
|
|
363
327
|
}
|
|
364
328
|
), U(() => {
|
|
365
|
-
i(),
|
|
329
|
+
i(), G(() => {
|
|
366
330
|
D(n.value);
|
|
367
331
|
});
|
|
368
332
|
}), (s, M) => (v(), p("div", ke, [
|
|
@@ -592,41 +556,17 @@ function Oe(t, r) {
|
|
|
592
556
|
const $ = e.value.getFullYear(), H = e.value.getMonth();
|
|
593
557
|
return new Date($, H + 1, 0) < g;
|
|
594
558
|
}), a = () => {
|
|
595
|
-
d.value && (e.value = new Date(
|
|
596
|
-
e.value.getFullYear(),
|
|
597
|
-
e.value.getMonth() - 1,
|
|
598
|
-
1
|
|
599
|
-
));
|
|
559
|
+
d.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() - 1, 1));
|
|
600
560
|
}, l = () => {
|
|
601
|
-
i.value && (e.value = new Date(
|
|
602
|
-
e.value.getFullYear(),
|
|
603
|
-
e.value.getMonth() + 1,
|
|
604
|
-
1
|
|
605
|
-
));
|
|
561
|
+
i.value && (e.value = new Date(e.value.getFullYear(), e.value.getMonth() + 1, 1));
|
|
606
562
|
}, m = () => {
|
|
607
|
-
e.value = new Date(
|
|
608
|
-
e.value.getFullYear() - 1,
|
|
609
|
-
e.value.getMonth(),
|
|
610
|
-
1
|
|
611
|
-
);
|
|
563
|
+
e.value = new Date(e.value.getFullYear() - 1, e.value.getMonth(), 1);
|
|
612
564
|
}, D = () => {
|
|
613
|
-
e.value = new Date(
|
|
614
|
-
e.value.getFullYear() + 1,
|
|
615
|
-
e.value.getMonth(),
|
|
616
|
-
1
|
|
617
|
-
);
|
|
565
|
+
e.value = new Date(e.value.getFullYear() + 1, e.value.getMonth(), 1);
|
|
618
566
|
}, s = () => {
|
|
619
|
-
e.value = new Date(
|
|
620
|
-
e.value.getFullYear() - 10,
|
|
621
|
-
e.value.getMonth(),
|
|
622
|
-
1
|
|
623
|
-
);
|
|
567
|
+
e.value = new Date(e.value.getFullYear() - 10, e.value.getMonth(), 1);
|
|
624
568
|
}, M = () => {
|
|
625
|
-
e.value = new Date(
|
|
626
|
-
e.value.getFullYear() + 10,
|
|
627
|
-
e.value.getMonth(),
|
|
628
|
-
1
|
|
629
|
-
);
|
|
569
|
+
e.value = new Date(e.value.getFullYear() + 10, e.value.getMonth(), 1);
|
|
630
570
|
}, k = () => {
|
|
631
571
|
e.value = /* @__PURE__ */ new Date(), u.value = "date";
|
|
632
572
|
}, f = () => {
|
|
@@ -639,10 +579,7 @@ function Oe(t, r) {
|
|
|
639
579
|
break;
|
|
640
580
|
}
|
|
641
581
|
}, c = (g) => {
|
|
642
|
-
t.mode === "dateTime" && n.value && g.setHours(
|
|
643
|
-
n.value.getHours(),
|
|
644
|
-
n.value.getMinutes()
|
|
645
|
-
), _(g);
|
|
582
|
+
t.mode === "dateTime" && n.value && g.setHours(n.value.getHours(), n.value.getMinutes()), _(g);
|
|
646
583
|
}, b = (g) => {
|
|
647
584
|
_(g);
|
|
648
585
|
}, y = (g) => {
|
|
@@ -712,20 +649,22 @@ const Je = { class: "date-picker" }, Ue = {
|
|
|
712
649
|
onMonthSelect: $,
|
|
713
650
|
onYearSelect: H,
|
|
714
651
|
emitValue: A
|
|
715
|
-
} = Oe(e, u),
|
|
652
|
+
} = Oe(e, u), z = (w) => {
|
|
716
653
|
A(w);
|
|
717
654
|
};
|
|
718
|
-
return U(() => {
|
|
719
|
-
|
|
720
|
-
|
|
655
|
+
return U(async () => {
|
|
656
|
+
G(() => {
|
|
657
|
+
n.value && (d.value = n.value.clientHeight);
|
|
658
|
+
});
|
|
659
|
+
}), (w, B) => (v(), p("div", Je, [
|
|
721
660
|
w.mode !== "time" ? (v(), V(Ae, {
|
|
722
661
|
key: 0,
|
|
723
662
|
"current-date": o(i),
|
|
724
663
|
"view-mode": o(a),
|
|
725
664
|
"can-go-prev": o(m),
|
|
726
665
|
"can-go-next": o(D),
|
|
727
|
-
onPrev:
|
|
728
|
-
onNext:
|
|
666
|
+
onPrev: B[0] || (B[0] = (Q) => o(a) === "year" ? o(c)() : o(a) === "month" ? o(k)() : o(s)()),
|
|
667
|
+
onNext: B[1] || (B[1] = (Q) => o(a) === "year" ? o(b)() : o(a) === "month" ? o(f)() : o(M)()),
|
|
729
668
|
onHeaderClick: o(C),
|
|
730
669
|
onCurrentDate: o(y)
|
|
731
670
|
}, null, 8, ["current-date", "view-mode", "can-go-prev", "can-go-next", "onHeaderClick", "onCurrentDate"])) : N("", !0),
|
|
@@ -776,7 +715,7 @@ const Je = { class: "date-picker" }, Ue = {
|
|
|
776
715
|
"selected-time": o(l),
|
|
777
716
|
"time-format": w.timeFormat,
|
|
778
717
|
"time-interval": w.timeInterval,
|
|
779
|
-
onUpdate:
|
|
718
|
+
onUpdate: z
|
|
780
719
|
}, null, 8, ["selected-time", "time-format", "time-interval"])
|
|
781
720
|
])) : N("", !0)
|
|
782
721
|
], 6),
|
|
@@ -785,7 +724,7 @@ const Je = { class: "date-picker" }, Ue = {
|
|
|
785
724
|
"selected-time": o(l),
|
|
786
725
|
"time-format": w.timeFormat,
|
|
787
726
|
"time-interval": w.timeInterval,
|
|
788
|
-
onUpdate:
|
|
727
|
+
onUpdate: z
|
|
789
728
|
}, null, 8, ["selected-time", "time-format", "time-interval"])) : N("", !0)
|
|
790
729
|
]));
|
|
791
730
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "v-datepicker-lite",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "A lightweight Vue 3 date picker with date, time, date-time, week, and month modes",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "safdar-azeem",
|
|
@@ -47,7 +47,13 @@
|
|
|
47
47
|
"vite-plugin-dts": "^3.9.1",
|
|
48
48
|
"vue-tsc": "^2.0.21"
|
|
49
49
|
},
|
|
50
|
-
"
|
|
51
|
-
"
|
|
50
|
+
"prettier": {
|
|
51
|
+
"printWidth": 105,
|
|
52
|
+
"semi": false,
|
|
53
|
+
"singleQuote": true,
|
|
54
|
+
"trailingComma": "es5",
|
|
55
|
+
"tabWidth": 3,
|
|
56
|
+
"endOfLine": "auto",
|
|
57
|
+
"bracketSameLine": true
|
|
52
58
|
}
|
|
53
59
|
}
|
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--date-picker-primary: #4f46e5;--date-picker-primary-fg: #ffffff;--date-picker-text: #374151;--date-picker-border: #
|
|
1
|
+
:root{--date-picker-primary: #4f46e5;--date-picker-primary-fg: #ffffff;--date-picker-text: #374151;--date-picker-border: #00000020;--date-picker-secondary: #f7f7f9;--date-picker-hover: #00000010;--date-picker-disabled: #9ca3af;--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;color:var(--date-picker-disabled);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{color:var(--date-picker-disabled)}.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{color:var(--date-picker-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);color:var(--date-picker-disabled);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;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;display:flex;flex-direction:column;border:1px solid var(--date-picker-border);border-radius:var(--date-picker-radius);scrollbar-width:thin;scrollbar-color:var(--date-picker-border) transparent}.time-wheel::-webkit-scrollbar{width:6px}.time-wheel::-webkit-scrollbar-track{background:transparent}.time-wheel::-webkit-scrollbar-thumb{background:var(--date-picker-border);border-radius:3px}.time-wheel::-webkit-scrollbar-thumb:hover{background:var(--date-picker-disabled)}.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 svg{width:1.3em;height:1.3em;fill:currentColor}.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}
|
package/types/index.d.ts
CHANGED
|
@@ -1,58 +1,58 @@
|
|
|
1
1
|
export interface DisabledDateRange {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
start: string
|
|
3
|
+
end?: string
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
export interface DatePickerProps {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
value?: Date | string | null
|
|
8
|
+
mode?: 'date' | 'time' | 'dateTime' | 'week' | 'month'
|
|
9
|
+
minDate?: string
|
|
10
|
+
maxDate?: string
|
|
11
|
+
disabledDates?: DisabledDateRange[]
|
|
12
|
+
format?: string
|
|
13
|
+
disabled?: boolean
|
|
14
|
+
readonly?: boolean
|
|
15
|
+
timeFormat?: '12h' | '24h'
|
|
16
|
+
timeInterval?: 15 | 30 | 60
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export interface DatePickerEmits {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
'update:value': [value: Date | string | null]
|
|
21
|
+
change: [value: Date | string | null]
|
|
22
|
+
select: [value: Date | string | null]
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
export interface CalendarDate {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
26
|
+
date: Date
|
|
27
|
+
day: number
|
|
28
|
+
month: number
|
|
29
|
+
year: number
|
|
30
|
+
isCurrentMonth: boolean
|
|
31
|
+
isToday: boolean
|
|
32
|
+
isSelected: boolean
|
|
33
|
+
isDisabled: boolean
|
|
34
|
+
weekNumber?: number
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
export interface WeekData {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
weekNumber: number
|
|
39
|
+
days: CalendarDate[]
|
|
40
|
+
isSelected: boolean
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
export interface MonthData {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
month: number
|
|
45
|
+
year: number
|
|
46
|
+
name: string
|
|
47
|
+
isSelected: boolean
|
|
48
|
+
isDisabled: boolean
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
export interface YearData {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
year: number
|
|
53
|
+
isSelected: boolean
|
|
54
|
+
isDisabled: boolean
|
|
55
|
+
isCurrent: boolean
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
export type DatePickerMode = 'date' | 'time' | 'dateTime' | 'week' | 'month'
|