@kananon/thai-datepicker
Version:
Thai Buddhist Calendar DatePicker for Vue 3
218 lines (217 loc) • 7.58 kB
JavaScript
import { ref as f, computed as k, watch as W, onMounted as z, onBeforeUnmount as H, openBlock as r, createElementBlock as o, createElementVNode as l, createVNode as R, Transition as j, withCtx as K, withDirectives as Y, Fragment as _, renderList as g, toDisplayString as D, vModelSelect as M, normalizeClass as q, createCommentVNode as G } from "vue";
const J = (i, S) => {
const v = i.__vccOpts || i;
for (const [p, h] of S)
v[p] = h;
return v;
}, Q = { class: "input-wrapper" }, X = ["value", "placeholder"], Z = {
key: 0,
class: "calendar-popup"
}, ee = { class: "calendar-header" }, te = { class: "date-selectors" }, ae = ["value"], ne = ["value"], le = { class: "calendar-weekdays" }, re = { class: "calendar-grid" }, oe = ["onClick", "aria-label"], se = {
__name: "ThaiDatePicker",
props: {
modelValue: {
type: String,
default: ""
},
placeholder: {
type: String,
default: "เลือกวันที่"
},
minYear: {
type: Number,
default: () => (/* @__PURE__ */ new Date()).getFullYear() - 50
},
maxYear: {
type: Number,
default: () => (/* @__PURE__ */ new Date()).getFullYear() + 10
}
},
emits: ["update:modelValue", "change"],
setup(i, { emit: S }) {
const v = i, p = S, h = f(null), n = f(null), m = f(!1), d = /* @__PURE__ */ new Date(), u = f(d.getMonth()), c = f(d.getFullYear()), T = [
"มกราคม",
"กุมภาพันธ์",
"มีนาคม",
"เมษายน",
"พฤษภาคม",
"มิถุนายน",
"กรกฎาคม",
"สิงหาคม",
"กันยายน",
"ตุลาคม",
"พฤศจิกายน",
"ธันวาคม"
], x = ["จ", "อ", "พ", "พฤ", "ศ", "ส", "อา"], $ = k(() => {
const t = [];
for (let a = v.minYear; a <= v.maxYear; a++)
t.push(a);
return t;
}), E = k(() => new Date(c.value, u.value + 1, 0).getDate()), O = k(() => (new Date(c.value, u.value, 1).getDay() + 6) % 7), F = k(() => {
if (!n.value)
return "";
const { year: t, month: a, day: e } = n.value, s = b(t), y = String(a + 1).padStart(2, "0");
return `${String(e).padStart(2, "0")}/${y}/${s}`;
}), P = k(() => {
if (!n.value)
return "";
const { year: t, month: a, day: e } = n.value, s = String(a + 1).padStart(2, "0");
return `${String(e).padStart(2, "0")}/${s}/${t}`;
});
function b(t) {
return t + 543;
}
function B(t) {
if (!t)
return null;
const a = t.split("/");
if (a.length !== 3)
return null;
const e = parseInt(a[0], 10), s = parseInt(a[1], 10) - 1, y = parseInt(a[2], 10);
return isNaN(e) || isNaN(s) || isNaN(y) ? null : { year: y, month: s, day: e };
}
function I(t) {
return n.value && n.value.year === c.value && n.value.month === u.value && n.value.day === t;
}
function A(t) {
return d.getFullYear() === c.value && d.getMonth() === u.value && d.getDate() === t;
}
function V() {
m.value = !m.value;
}
function C(t) {
n.value = {
year: c.value,
month: u.value,
day: t
};
const a = P.value;
p("update:modelValue", a), p("change", a), m.value = !1;
}
function L() {
c.value = d.getFullYear(), u.value = d.getMonth(), C(d.getDate());
}
function U() {
n.value = null, p("update:modelValue", ""), p("change", ""), m.value = !1;
}
function N(t) {
h.value && !h.value.contains(t.target) && (m.value = !1);
}
return W(() => v.modelValue, (t) => {
n.value = B(t), n.value && (c.value = n.value.year, u.value = n.value.month);
}, { immediate: !0 }), z(() => {
document.addEventListener("click", N);
}), H(() => {
document.removeEventListener("click", N);
}), (t, a) => (r(), o("div", {
class: "datepicker",
ref_key: "datepickerRef",
ref: h
}, [
l("div", Q, [
l("input", {
type: "text",
value: F.value,
onClick: V,
readonly: "",
placeholder: i.placeholder,
class: "datepicker-input"
}, null, 8, X),
(r(), o("svg", {
class: "calendar-icon",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
onClick: V
}, a[2] || (a[2] = [
l("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
}, null, -1)
])))
]),
R(j, { name: "calendar" }, {
default: K(() => [
m.value ? (r(), o("div", Z, [
l("div", ee, [
l("div", te, [
Y(l("select", {
"onUpdate:modelValue": a[0] || (a[0] = (e) => u.value = e),
class: "date-select month-select",
"aria-label": "เลือกเดือน"
}, [
(r(), o(_, null, g(T, (e, s) => l("option", {
key: s,
value: s
}, D(e), 9, ae)), 64))
], 512), [
[M, u.value]
]),
Y(l("select", {
"onUpdate:modelValue": a[1] || (a[1] = (e) => c.value = e),
class: "date-select year-select",
"aria-label": "เลือกปี"
}, [
(r(!0), o(_, null, g($.value, (e) => (r(), o("option", {
key: e,
value: e
}, D(b(e)), 9, ne))), 128))
], 512), [
[M, c.value]
])
])
]),
l("div", le, [
(r(), o(_, null, g(x, (e) => l("div", {
key: e,
class: "weekday"
}, D(e), 1)), 64))
]),
l("div", re, [
(r(!0), o(_, null, g(O.value, (e) => (r(), o("div", {
key: `empty-${e}`,
class: "calendar-cell empty"
}))), 128)),
(r(!0), o(_, null, g(E.value, (e) => (r(), o("button", {
key: e,
type: "button",
class: q(["calendar-cell day", {
selected: I(e),
today: A(e),
"other-month": !1
}]),
onClick: (s) => C(e),
"aria-label": `เลือกวันที่ ${e}`
}, D(e), 11, oe))), 128))
]),
l("div", { class: "calendar-footer" }, [
l("button", {
type: "button",
class: "today-button",
onClick: L
}, " วันนี้ "),
l("button", {
type: "button",
class: "clear-button",
onClick: U
}, " ล้าง ")
])
])) : G("", !0)
]),
_: 1
})
], 512));
}
}, w = /* @__PURE__ */ J(se, [["__scopeId", "data-v-11103d82"]]), ie = {
install(i) {
i.component("ThaiDatePicker", w), i.component("thai-date-picker", w);
},
ThaiDatePicker: w
};
export {
w as ThaiDatePicker,
ie as default
};