rc-calendar-picker
Version:
<div align="center"> <a href="https://github.com/noxxxxxxxx/calendar" target="_blank"> <img alt="Calendar Logo" width="150" src="https://github.com/noxxxxxxxx/calendar/blob/main/assets/calendar.svg"/> </a> </div>
617 lines (616 loc) • 18.5 kB
JavaScript
import { jsx as s, jsxs as _ } from "react/jsx-runtime";
import A from "dayjs";
import { useEffect as J, useState as Q, createElement as X, Fragment as pe, useRef as we } from "react";
var M = /* @__PURE__ */ ((e) => (e.Year = "year", e.Month = "month", e.Day = "day", e.Time = "time", e))(M || {}), j = /* @__PURE__ */ ((e) => (e.Hour = "hour", e.Minute = "minute", e.Second = "second", e.Millisecond = "millisecond", e.Ampm = "ampm", e))(j || {});
const ke = {
day: "date",
month: "month",
year: "year"
/* Year */
}, ve = {
day: "time",
month: "day",
year: "month"
/* Month */
}, G = {
hour: {
min: 0,
max: 23,
step: 1
},
minute: {
min: 0,
max: 59,
step: 1
},
second: {
min: 0,
max: 59,
step: 1
},
millisecond: {
min: 0,
max: 999,
step: 1
}
}, te = "L", ne = "LTS", $ = (e, t) => {
const n = {
month: 2,
day: 2,
hour: 2,
minute: 2,
second: 2,
millisecond: 3
};
let l = t + "";
for (; l.length < n[e]; ) l = "0" + l;
return l;
}, Ne = (e) => {
if (!e)
return {
hour: "00",
minute: "00",
second: "00",
millisecond: "00",
ampm: "am"
};
const t = e.hour();
return {
hour: $("hour", t),
minute: $("minute", e.minute()),
second: $("second", e.second()),
millisecond: $("millisecond", e.millisecond()),
ampm: t < 12 ? "am" : "pm"
};
}, Ce = (e) => {
const t = G;
return Object.keys(G).forEach((n) => {
t[n] = {
...G[n],
...(e == null ? void 0 : e[n]) || {}
};
}), t;
}, De = (e) => e.charAt(0).toUpperCase() + e.slice(1), Z = (e) => typeof e == "boolean" ? e ? te : "" : e ?? te, z = (e) => typeof e == "boolean" ? e === !0 ? ne : "" : e ?? ne, re = (e, t, n, l) => {
if (!e) return;
const a = Z(n), N = z(l), f = `${a || ""} ${N || ""}`.trim();
return t !== void 0 ? e.clone().utcOffset(t).format(f) : e.clone().format(f);
}, Oe = (e) => e !== void 0 ? A().utcOffset(e).startOf("day") : A().startOf("day"), ge = (e) => {
if (!e) return;
const t = e.firstDayOfWeek(), n = [];
let l = 0;
return e.weekdaysMin().forEach(function(a) {
n[(7 + l++ - t) % 7] = a;
}), n;
}, W = (e, t) => e ? e(t) !== !1 : !0, be = (e, t) => t < 4 ? e[0] : t < 8 ? e[1] : e[2], oe = (e, t) => {
if (!e) return !1;
const n = A(e).format(z(t)).toLowerCase();
return n.indexOf("am") !== -1 || n.indexOf("pm") !== -1;
}, Me = (e, t) => e ? A(e).format(z(t)) : "", ce = (e, t) => t !== void 0 ? A(e).utcOffset(t) : A(e), xe = (e, t) => {
J(() => {
const n = (l) => {
e.current && !e.current.contains(l.target) && t();
};
return document.addEventListener("click", n), () => {
document.removeEventListener("click", n);
};
}, [e, t]);
}, Se = (e) => {
const {
value: t,
showInput: n,
timezoneOffset: l,
dateFormat: a,
timeFormat: N,
inputProps: f,
onInputChange: p,
openCalendar: D,
closeCalendar: g
} = e, [C, S] = Q("");
if (J(() => {
S(re(t, l, a, N) ?? "");
}, [t, l, a, N]), !n) return;
const h = {
...f,
type: "text",
value: C,
onFocus: (r) => {
W(f == null ? void 0 : f.onFocus, r) && (D == null || D());
},
onChange: (r) => {
if (!W(f == null ? void 0 : f.onChange, r)) return;
const y = r.target.value, o = A(y).isValid() ? re(A(y), l, a) : y;
S(y), p == null || p(o ?? "");
},
onKeyDown: (r) => {
W(f == null ? void 0 : f.onKeyDown, r) && r.key === "Tab" && g();
},
onClick: (r) => {
W(f == null ? void 0 : f.onClick, r) && (D == null || D());
}
};
return /* @__PURE__ */ s("input", { ...h });
}, K = ({ onClickPrev: e, onClickSwitch: t, onClickNext: n, switchContent: l, switchColSpan: a, switchProps: N }) => /* @__PURE__ */ _("tr", { className: "nc-switch-head", children: [
/* @__PURE__ */ s(
"th",
{
className: "nc-prev",
onClick: e,
children: /* @__PURE__ */ s("span", { children: "‹" })
}
),
/* @__PURE__ */ s(
"th",
{
className: "nc-switch",
colSpan: a,
onClick: t,
...N,
children: l
}
),
/* @__PURE__ */ s(
"th",
{
className: "nc-next",
onClick: n,
children: /* @__PURE__ */ s("span", { children: "›" })
}
)
] }), Ve = (e) => {
const {
viewDate: t,
selectedDate: n,
isValidDate: l = () => !0,
updateDate: a,
renderDay: N,
navigate: f,
showView: p,
timeFormat: D,
siblingDate: g,
timezoneOffset: C,
showTime: S
} = e, I = () => {
const r = t == null ? void 0 : t.localeData();
return /* @__PURE__ */ s(
K,
{
onClickPrev: () => f(-1, M.Month),
onClickSwitch: () => p(M.Month),
onClickNext: () => f(1, M.Month),
switchContent: `${r == null ? void 0 : r.months(t)} ${t == null ? void 0 : t.year()}`,
switchColSpan: 5,
switchProps: { "data-value": t == null ? void 0 : t.month() }
}
);
}, w = () => {
var o;
const r = t == null ? void 0 : t.localeData(), y = (o = ge(r)) == null ? void 0 : o.map((d, i) => /* @__PURE__ */ s(
"th",
{
className: "dow",
children: d
},
d + i
));
return /* @__PURE__ */ s("tr", { children: y });
}, c = (r, y, o, d) => {
const i = r.date(), k = r.month(), L = r.year(), V = (P) => {
a(P);
}, Y = {
key: r.format("M_D"),
"data-value": i,
"data-month": k,
"data-year": L,
onClick: () => {
},
className: ""
};
let x = "nc-day";
if (r.isBefore(y) ? x += " nc-before" : r.isAfter(o) && (x += " nc-after"), n && g) {
const [P, R] = n.isBefore(g, "day") ? [n, g] : [g, n];
(r.isSame(P, "day") || // 如果是开始/结束日
r.isSame(R, "day") || // 或者同一天
r.isAfter(P, "day") && r.isBefore(R, "day")) && (x += " in-range");
}
return g != null && g.isSame(r, "day") && (x += " nc-sibling"), n != null && n.isSame(r, "day") && (x += " nc-active"), r.isSame(d, "day") && (x += " nc-today"), l(r.clone().year(L).month(k).date(i).startOf("day")) ? Y.onClick = V : x += " nc-disabled", Y.className = x, N ? N(Y, r.clone().date(), n == null ? void 0 : n.clone()) : /* @__PURE__ */ X(
"td",
{
...Y,
key: Y.key
},
r.clone().date()
);
}, m = () => {
const r = Oe(C), y = t, o = y == null ? void 0 : y.clone().startOf("month"), d = y == null ? void 0 : y.clone().endOf("month"), i = [[], [], [], [], [], []];
let k = y == null ? void 0 : y.clone().subtract(1, "month").endOf("month").startOf("week").startOf("day");
const L = k == null ? void 0 : k.clone().add(42, "day");
let V = 0;
for (; k != null && k.isBefore(L); ) {
const Y = Math.floor(V / 7), x = i[Y > 5 ? 5 : Y], P = c(k, o, d, r);
x.push(P), k = k.add(1, "d"), V += 1;
}
return i.map((Y, x) => /* @__PURE__ */ s("tr", { children: Y }, `${L == null ? void 0 : L.month()}_${x}`));
}, h = () => {
if (!(!S || !D))
return /* @__PURE__ */ s("tfoot", { children: /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(
"td",
{
onClick: () => p("time"),
colSpan: 7,
className: "nc-time-toggle",
children: t == null ? void 0 : t.format(D)
}
) }) });
};
return /* @__PURE__ */ s("div", { className: "nc-days", children: /* @__PURE__ */ _("table", { children: [
/* @__PURE__ */ _("thead", { children: [
I(),
w()
] }),
/* @__PURE__ */ s("tbody", { children: m() }),
h()
] }) });
}, Ye = (e) => {
const { viewDate: t, updateDate: n, renderMonth: l, isValidDate: a, navigate: N, showView: f, selectedDate: p } = e, D = () => {
const w = t == null ? void 0 : t.year();
return /* @__PURE__ */ s(
K,
{
onClickPrev: () => N(-1, M.Year),
onClickSwitch: () => f(M.Year),
onClickNext: () => N(1, M.Year),
switchContent: w,
switchColSpan: "5"
}
);
}, g = (w) => {
if (!a || !t)
return !1;
const c = t == null ? void 0 : t.clone().set("month", w);
let m = c.endOf("month").date() + 1;
for (; m-- > 1; )
if (a(c.date(m)))
return !1;
return !0;
}, C = (w) => {
const c = t == null ? void 0 : t.localeData().monthsShort(t.month(w));
return De(c);
}, S = (w) => {
let c = "nc-month", m = () => {
};
g(w) ? c += " nc-disabled" : m = (r) => {
n(r);
}, p && p.year() === (t == null ? void 0 : t.year()) && p.month() === w && (c += " nc-active");
const h = { key: w, className: c, "data-value": w, onClick: m };
return l ? l(h, w, p == null ? void 0 : p.year(), p == null ? void 0 : p.clone()) : /* @__PURE__ */ X(
"td",
{
...h,
key: h.key
},
C(w)
);
}, I = () => {
const w = [[], [], []];
for (let c = 0; c < 12; c++)
be(w, c).push(S(c));
return w.map((c, m) => /* @__PURE__ */ s("tr", { children: c }, m));
};
return /* @__PURE__ */ _("div", { className: "nc-months", children: [
/* @__PURE__ */ s("table", { children: /* @__PURE__ */ s("thead", { children: D() }) }),
/* @__PURE__ */ s("table", { children: /* @__PURE__ */ s("tbody", { children: I() }) })
] });
}, Fe = (e) => {
const { selectedDate: t, viewDate: n, setTime: l, timeFormat: a, dateFormat: N, timeLimit: f, showView: p, timeConstraints: D } = e, g = Ce(D), [C, S] = Q(Ne(n)), I = () => {
const o = [], d = f;
return d.toLowerCase().indexOf("h") !== -1 && (o.push(j.Hour), d.indexOf("m") !== -1 && (o.push(j.Minute), d.indexOf("s") !== -1 && (o.push(j.Second), d.indexOf("S") !== -1 && o.push(j.Millisecond)))), oe(n, a) && o.push(j.Ampm), o;
}, w = () => {
if (!N) return;
const o = t || n;
return /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(
"th",
{
className: "nc-switch",
colSpan: 4,
onClick: () => p(M.Day),
children: o == null ? void 0 : o.format(Z(N))
}
) }) });
}, c = () => {
let o = parseInt(C.hour, 10);
o >= 12 ? o -= 12 : o += 12, S({
...C,
hour: $("hour", o),
ampm: C.ampm === "am" ? "pm" : "am"
}), l == null || l("hour", parseInt(String(o), 10));
}, m = (o) => {
const d = g[o];
if (d) {
let i = parseInt(C[o], 10) + d.step;
return i > d.max && (i = d.min + (i - (d.max + 1))), $(o, i);
}
throw new Error("Invalid tc value");
}, h = (o) => {
const d = g[o];
if (d) {
let i = parseInt(C[o], 10) - d.step;
return i < d.min && (i = d.max + 1 - (d.min - i)), $(o, i);
}
throw new Error("Invalid tc value");
}, r = (o, d, i) => {
if (o.button && o.button !== 0)
return;
if (i === "ampm") return c();
const k = d === "increase" ? m(i) : h(i);
S({
...C,
[i]: k
}), l == null || l(i, parseInt(k, 10));
}, y = (o, d) => {
let i = d;
return o === "hour" && oe(n, a) && (i = $("hour", (Number(i) - 1) % 12 + 1), Number(i) === 0 && (i = 12)), o === "ampm" && (Me(n, a).indexOf("M") !== -1 ? i = n == null ? void 0 : n.format("A") : i = n == null ? void 0 : n.format("a")), /* @__PURE__ */ _("div", { className: "nc-counter", children: [
/* @__PURE__ */ s(
"span",
{
className: "nc-btn",
onMouseDown: (k) => r(k, "increase", o),
children: "▲"
}
),
/* @__PURE__ */ s("div", { className: "nc-count", children: i }),
/* @__PURE__ */ s(
"span",
{
className: "nc-btn",
onMouseDown: (k) => r(k, "decrease", o),
children: "▼"
}
)
] });
};
return /* @__PURE__ */ s("div", { className: "nc-time", children: /* @__PURE__ */ _("table", { children: [
w(),
/* @__PURE__ */ s("tbody", { children: /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s("td", { children: /* @__PURE__ */ s("div", { className: "nc-counters", children: I().map((o, d) => /* @__PURE__ */ s(pe, { children: y(o, C[o]) }, `sep${d}`)) }) }) }) })
] }) });
}, Ie = (e) => {
const { renderYear: t, navigate: n, showView: l, viewDate: a, selectedDate: N, updateDate: f, isValidDate: p } = e, D = (c) => {
const m = {};
if (m[c] !== void 0)
return m[c];
if (!p)
return !1;
const h = a == null ? void 0 : a.clone().set("year", c);
if (!h) return !1;
let r = h.endOf("year").dayOfYear() + 1;
for (; r-- > 1; )
if (p(h.dayOfYear(r)))
return m[c] = !1, !1;
return m[c] = !0, !0;
}, g = (c) => {
const m = a == null ? void 0 : a.year();
let h = "nc-year", r = () => {
};
D(c) ? h += " nc-disabled" : r = (o) => {
f(o);
}, m === c && (h += " nc-active");
const y = { key: c, className: h, "data-value": c, onClick: r };
return t ? t(y, c, N == null ? void 0 : N.clone()) : /* @__PURE__ */ X(
"td",
{
...y,
key: y.key
},
c
);
}, C = () => a && typeof a.year == "function" ? Math.floor(a.year() / 10) * 10 : 0, S = () => {
const c = C();
return /* @__PURE__ */ s(
K,
{
onClickPrev: () => n(-10, M.Year),
onClickSwitch: () => l(M.Year),
onClickNext: () => n(10, M.Year),
switchContent: `${c}-${c + 9}`,
switchColSpan: "5"
}
);
}, I = (c, m) => m < 3 ? c[0] : m < 7 ? c[1] : c[2], w = () => {
const c = C(), m = [[], [], []];
if (c)
for (let h = c - 1; h < c + 11; h++)
I(m, h - c).push(g(h));
return m.map((h, r) => /* @__PURE__ */ s("tr", { children: h }, r));
};
return /* @__PURE__ */ _("div", { className: "nc-years", children: [
/* @__PURE__ */ s("table", { children: /* @__PURE__ */ s("thead", { children: S() }) }),
/* @__PURE__ */ s("table", { children: /* @__PURE__ */ s("tbody", { children: w() }) })
] });
}, Pe = (e) => {
const {
value: t,
initialValue: n,
initialViewMode: l = M.Day,
timezoneOffset: a,
closeOnSelect: N = !0,
className: f,
showInput: p = !0,
open: D,
inputProps: g,
dateFormat: C = !0,
timeFormat: S = !0,
viewMode: I,
closeOnClickOutside: w = !0,
timeLimit: c = "HH:mm:ss",
// 24 小时制
showTime: m = !1,
isEndDate: h,
siblingDate: r,
isValidDate: y,
renderYear: o,
renderMonth: d,
renderDay: i,
onOpen: k,
onClose: L,
onChange: V,
onBeforeNavigate: Y,
onNavigate: x,
onNavigateForward: P,
onNavigateBack: R,
timeConstraints: se
} = e, [v, E] = Q({
open: D ?? !1,
selectedDate: t ?? n ?? ce(A(), a),
inputValue: void 0,
currentView: I || l,
viewDate: t ?? n ?? ce(A(), a),
ready: !1
}), ee = we(null), U = () => v.open || D === !1, ae = () => {
let u = "rdt";
const O = f;
return Array.isArray(O) ? u += " " + O.join(" ") : O && (u += " " + O), p || (u += " nc-static"), U() && (u += " nc-open"), u;
}, ie = () => {
U() || (E({
...v,
open: !0
}), k == null || k());
}, q = (u) => {
if (!U()) return;
const O = {
...v,
...u ?? {},
open: !N
};
E(O), N && (L == null || L(O.selectedDate));
}, le = (u, O) => {
const b = (O || v.viewDate).clone(), B = (Y == null ? void 0 : Y(u, v.currentView, b)) ?? u;
x == null || x(B), E({
...v,
currentView: B
});
}, ue = (u) => {
const O = u.target;
if (O) {
const b = v.currentView;
let F;
const B = Number(O.dataset.value), he = Number(O.dataset.year), ye = Number(O.dataset.month), H = {};
if (b === M.Day)
F = v.viewDate.clone().year(he).month(ye).date(B).hour(v.viewDate.hour()), H.selectedDate = F.clone();
else {
const T = ke[b];
F = v.viewDate[T](B);
}
if (H.viewDate = F.clone(), V == null || V(H.viewDate), b === I || !I && b === M.Day) {
H.selectedDate = F.clone();
const T = {
...v,
...H
};
E(T), q(T);
return;
}
H.currentView = ve[b], E({
...v,
...H
});
}
}, de = (u, O) => {
let b = v.viewDate.clone();
b = b.add(u, O);
const F = u > 0 ? P : R;
F == null || F(u, O), E({
...v,
viewDate: b
});
}, me = (u, O) => {
var F;
let b = (F = v.viewDate) == null ? void 0 : F.clone();
b && (b = b.set(u, O), E({
...v,
selectedDate: b,
viewDate: b.clone()
}), V == null || V(b));
}, fe = () => {
const u = {
selectedDate: v.selectedDate,
viewDate: v.viewDate,
updateDate: ue,
navigate: de,
showView: le,
timezoneOffset: a,
isEndDate: h,
siblingDate: r,
isValidDate: y,
renderYear: o,
renderMonth: d,
renderDay: i,
setTime: me,
dateFormat: Z(C),
timeFormat: z(S),
timeConstraints: se,
timeLimit: c,
showTime: m
};
switch (v.currentView) {
case M.Year:
return /* @__PURE__ */ s(Ie, { ...u });
case M.Month:
return /* @__PURE__ */ s(Ye, { ...u });
case M.Time:
return /* @__PURE__ */ s(Fe, { ...u });
default:
return /* @__PURE__ */ s(Ve, { ...u });
}
};
return xe(ee, () => {
w && q();
}), J(() => {
if (t) {
const u = t;
E({
...v,
selectedDate: u,
viewDate: u.clone(),
ready: !0
});
} else
E({
...v,
ready: !0
});
}, [t, a, C, S]), v.ready ? /* @__PURE__ */ _(
"div",
{
className: ae(),
ref: ee,
children: [
/* @__PURE__ */ s(
Se,
{
showInput: p,
value: v.selectedDate,
dateFormat: C,
timeFormat: S,
inputProps: g,
openCalendar: ie,
closeCalendar: q,
timezoneOffset: a,
onInputChange: (u) => V == null ? void 0 : V(A(u).isValid() ? A(u) : u)
}
),
/* @__PURE__ */ s(
"div",
{
className: "nc-picker",
onClick: (u) => u.stopPropagation(),
children: D === !1 ? null : v.open ? fe() : null
}
)
]
}
) : null;
};
export {
j as TimeConstraintsKeys,
M as ViewMode,
Pe as default
};