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>
611 lines (610 loc) • 18.3 kB
JavaScript
import { jsx as s, jsxs as $ } from "react/jsx-runtime";
import L from "dayjs";
import { useEffect as J, useState as Q, createElement as X, Fragment as ye, useRef as pe } from "react";
var V = /* @__PURE__ */ ((e) => (e.Year = "year", e.Month = "month", e.Day = "day", e.Time = "time", e))(V || {}), H = /* @__PURE__ */ ((e) => (e.Hour = "hour", e.Minute = "minute", e.Second = "second", e.Millisecond = "millisecond", e.Ampm = "ampm", e))(H || {});
const we = {
day: "date",
month: "month",
year: "year"
/* Year */
}, ke = {
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", P = (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;
}, ve = (e) => {
if (!e)
return {
hour: "00",
minute: "00",
second: "00",
millisecond: "00",
ampm: "am"
};
const t = e.hour();
return {
hour: P("hour", t),
minute: P("minute", e.minute()),
second: P("second", e.second()),
millisecond: P("millisecond", e.millisecond()),
ampm: t < 12 ? "am" : "pm"
};
}, Ne = (e) => {
const t = G;
return Object.keys(G).forEach((n) => {
t[n] = {
...G[n],
...(e == null ? void 0 : e[n]) || {}
};
}), t;
}, Ce = (e) => e.charAt(0).toUpperCase() + e.slice(1), Z = (e) => typeof e == "boolean" ? e ? te : "" : e ?? te, W = (e) => typeof e == "boolean" ? e === !0 ? ne : "" : e ?? ne, R = (e, t, n, l) => {
if (!e) return;
const a = Z(n), C = W(l), f = `${a || ""} ${C || ""}`.trim();
return t !== void 0 ? e.clone().utcOffset(t).format(f) : e.clone().format(f);
}, ge = (e) => e !== void 0 ? L().utcOffset(e) : L(), be = (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;
}, z = (e, t) => e ? e(t) !== !1 : !0, Me = (e, t) => t < 4 ? e[0] : t < 8 ? e[1] : e[2], re = (e, t) => {
if (!e) return !1;
const n = L(e).format(W(t)).toLowerCase();
return n.indexOf("am") !== -1 || n.indexOf("pm") !== -1;
}, Oe = (e, t) => e ? L(e).format(W(t)) : "", 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]);
}, De = (e) => {
const {
value: t,
showInput: n,
timezoneOffset: l,
dateFormat: a,
timeFormat: C,
inputProps: f,
onInputChange: p,
openCalendar: b,
closeCalendar: g
} = e, [N, O] = Q("");
if (J(() => {
O(R(t, l, a, C) ?? "");
}, [t, l, a, C]), !n) return;
const h = {
...f,
type: "text",
value: N,
onFocus: (r) => {
z(f == null ? void 0 : f.onFocus, r) && (b == null || b());
},
onChange: (r) => {
if (!z(f == null ? void 0 : f.onChange, r)) return;
const y = r.target.value, o = L(y).isValid() ? R(L(y), l, a) : y;
O(y), p == null || p(o ?? "");
},
onKeyDown: (r) => {
z(f == null ? void 0 : f.onKeyDown, r) && r.key === "Tab" && g();
},
onClick: (r) => {
z(f == null ? void 0 : f.onClick, r) && (b == null || b());
}
};
return /* @__PURE__ */ s("input", { ...h });
}, K = ({ onClickPrev: e, onClickSwitch: t, onClickNext: n, switchContent: l, switchColSpan: a, switchProps: C }) => /* @__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,
...C,
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: C,
navigate: f,
showView: p,
timeFormat: b,
siblingDate: g,
timezoneOffset: N,
showTime: O
} = e, A = () => {
const r = t == null ? void 0 : t.localeData();
return /* @__PURE__ */ s(
K,
{
onClickPrev: () => f(-1, V.Month),
onClickSwitch: () => p(V.Month),
onClickNext: () => f(1, V.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 = be(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(), I = r.year(), S = (j) => {
a(j);
}, Y = {
key: r.format("M_D"),
"data-value": i,
"data-month": k,
"data-year": I,
onClick: () => {
},
className: ""
};
let D = "nc-day";
return r.isBefore(y) ? D += " nc-before" : r.isAfter(o) && (D += " nc-after"), n != null && n.isBefore(g, "day") && r.isBefore(g, "day") && r.isAfter(n, "day") && (D += " in-range"), g && (n != null && n.isAfter(g, "day")) && g && r.isAfter(g, "day") && r.isBefore(n, "day") && (D += " in-range"), g != null && g.isSame(r, "day") && (D += " nc-sibling"), n != null && n.isSame(r, "day") && (D += " nc-active"), r.isSame(d, "day") && (D += " nc-today"), l(r.clone().year(I).month(k).date(i).startOf("day")) ? Y.onClick = S : D += " nc-disabled", Y.className = D, C ? C(Y, r.clone().date(), n == null ? void 0 : n.clone()) : /* @__PURE__ */ X(
"td",
{
...Y,
key: Y.key
},
r.clone().date()
);
}, m = () => {
const r = ge(N), 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 I = k == null ? void 0 : k.clone().add(42, "day");
let S = 0;
for (; k != null && k.isBefore(I); ) {
const Y = Math.floor(S / 7), D = i[Y > 5 ? 5 : Y], j = c(k, o, d, r);
D.push(j), k = k.add(1, "d"), S += 1;
}
return i.map((Y, D) => /* @__PURE__ */ s("tr", { children: Y }, `${I == null ? void 0 : I.month()}_${D}`));
}, h = () => {
if (!(!O || !b))
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(b)
}
) }) });
};
return /* @__PURE__ */ s("div", { className: "nc-days", children: /* @__PURE__ */ $("table", { children: [
/* @__PURE__ */ $("thead", { children: [
A(),
w()
] }),
/* @__PURE__ */ s("tbody", { children: m() }),
h()
] }) });
}, Se = (e) => {
const { viewDate: t, updateDate: n, renderMonth: l, isValidDate: a, navigate: C, showView: f, selectedDate: p } = e, b = () => {
const w = t == null ? void 0 : t.year();
return /* @__PURE__ */ s(
K,
{
onClickPrev: () => C(-1, V.Year),
onClickSwitch: () => f(V.Year),
onClickNext: () => C(1, V.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;
}, N = (w) => {
const c = t == null ? void 0 : t.localeData().monthsShort(t.month(w));
return Ce(c);
}, O = (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
},
N(w)
);
}, A = () => {
const w = [[], [], []];
for (let c = 0; c < 12; c++)
Me(w, c).push(O(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: b() }) }),
/* @__PURE__ */ s("table", { children: /* @__PURE__ */ s("tbody", { children: A() }) })
] });
}, Ye = (e) => {
const { selectedDate: t, viewDate: n, setTime: l, timeFormat: a, dateFormat: C, timeLimit: f, showView: p, timeConstraints: b } = e, g = Ne(b), [N, O] = Q(ve(n)), A = () => {
const o = [], d = f;
return d.toLowerCase().indexOf("h") !== -1 && (o.push(H.Hour), d.indexOf("m") !== -1 && (o.push(H.Minute), d.indexOf("s") !== -1 && (o.push(H.Second), d.indexOf("S") !== -1 && o.push(H.Millisecond)))), re(n, a) && o.push(H.Ampm), o;
}, w = () => {
if (!C) return;
const o = t || n;
return /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(
"th",
{
className: "nc-switch",
colSpan: 4,
onClick: () => p(V.Day),
children: o == null ? void 0 : o.format(Z(C))
}
) }) });
}, c = () => {
let o = parseInt(N.hour, 10);
o >= 12 ? o -= 12 : o += 12, O({
...N,
hour: P("hour", o),
ampm: N.ampm === "am" ? "pm" : "am"
}), l == null || l("hour", parseInt(String(o), 10));
}, m = (o) => {
const d = g[o];
if (d) {
let i = parseInt(N[o], 10) + d.step;
return i > d.max && (i = d.min + (i - (d.max + 1))), P(o, i);
}
throw new Error("Invalid tc value");
}, h = (o) => {
const d = g[o];
if (d) {
let i = parseInt(N[o], 10) - d.step;
return i < d.min && (i = d.max + 1 - (d.min - i)), P(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);
O({
...N,
[i]: k
}), l == null || l(i, parseInt(k, 10));
}, y = (o, d) => {
let i = d;
return o === "hour" && re(n, a) && (i = P("hour", (Number(i) - 1) % 12 + 1), Number(i) === 0 && (i = 12)), o === "ampm" && (Oe(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: A().map((o, d) => /* @__PURE__ */ s(ye, { children: y(o, N[o]) }, `sep${d}`)) }) }) }) })
] }) });
}, Fe = (e) => {
const { renderYear: t, navigate: n, showView: l, viewDate: a, selectedDate: C, updateDate: f, isValidDate: p } = e, b = (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 = () => {
};
b(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, C == null ? void 0 : C.clone()) : /* @__PURE__ */ X(
"td",
{
...y,
key: y.key
},
c
);
}, N = () => a && typeof a.year == "function" ? Math.floor(a.year() / 10) * 10 : 0, O = () => {
const c = N();
return /* @__PURE__ */ s(
K,
{
onClickPrev: () => n(-10, V.Year),
onClickSwitch: () => l(V.Year),
onClickNext: () => n(10, V.Year),
switchContent: `${c}-${c + 9}`,
switchColSpan: "5"
}
);
}, A = (c, m) => m < 3 ? c[0] : m < 7 ? c[1] : c[2], w = () => {
const c = N(), m = [[], [], []];
if (c)
for (let h = c - 1; h < c + 11; h++)
A(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: O() }) }),
/* @__PURE__ */ s("table", { children: /* @__PURE__ */ s("tbody", { children: w() }) })
] });
}, Ee = (e) => {
const {
value: t,
initialValue: n,
initialViewMode: l = V.Day,
timezoneOffset: a,
closeOnSelect: C = !0,
className: f,
showInput: p = !0,
open: b,
inputProps: g,
dateFormat: N = !0,
timeFormat: O = !0,
viewMode: A,
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: I,
onChange: S,
onBeforeNavigate: Y,
onNavigate: D,
onNavigateForward: j,
onNavigateBack: oe,
timeConstraints: ce
} = e, [v, E] = Q({
open: b ?? !1,
selectedDate: L(R(t || n, a, N, O)),
inputValue: void 0,
currentView: A || l,
viewDate: L(R(t || n, a, N, O)),
ready: !1
}), ee = pe(null), U = () => v.open || b === !1, se = () => {
let u = "rdt";
const M = f;
return Array.isArray(M) ? u += " " + M.join(" ") : M && (u += " " + M), p || (u += " nc-static"), U() && (u += " nc-open"), u;
}, ae = () => {
U() || (E({
...v,
open: !0
}), k == null || k());
}, q = (u) => {
if (!U()) return;
const M = {
...v,
...u ?? {},
open: !C
};
E(M), C && (I == null || I(M.selectedDate));
}, ie = (u, M) => {
const x = (M || v.viewDate).clone(), B = (Y == null ? void 0 : Y(u, v.currentView, x)) ?? u;
D == null || D(B), E({
...v,
currentView: B
});
}, le = (u) => {
const M = u.target;
if (M) {
const x = v.currentView;
let F;
const B = Number(M.dataset.value), fe = Number(M.dataset.year), he = Number(M.dataset.month), _ = {};
if (x === V.Day)
F = v.viewDate.clone().year(fe).month(he).date(B).hour(v.viewDate.hour()), _.selectedDate = F.clone();
else {
const T = we[x];
F = v.viewDate[T](B);
}
if (_.viewDate = F.clone(), S == null || S(_.viewDate), x === A || !A && x === V.Day) {
_.selectedDate = F.clone();
const T = {
...v,
..._
};
E(T), q(T);
return;
}
_.currentView = ke[x], E({
...v,
..._
});
}
}, ue = (u, M) => {
let x = v.viewDate.clone();
x = x.add(u, M);
const F = u > 0 ? j : oe;
F == null || F(u, M), E({
...v,
viewDate: x
});
}, de = (u, M) => {
var F;
let x = (F = v.viewDate) == null ? void 0 : F.clone();
x && (x = x.set(u, M), E({
...v,
selectedDate: x,
viewDate: x.clone()
}), S == null || S(x));
}, me = () => {
const u = {
selectedDate: v.selectedDate,
viewDate: v.viewDate,
updateDate: le,
navigate: ue,
showView: ie,
timezoneOffset: a,
isEndDate: h,
siblingDate: r,
isValidDate: y,
renderYear: o,
renderMonth: d,
renderDay: i,
setTime: de,
dateFormat: Z(N),
timeFormat: W(O),
timeConstraints: ce,
timeLimit: c,
showTime: m
};
switch (v.currentView) {
case V.Year:
return /* @__PURE__ */ s(Fe, { ...u });
case V.Month:
return /* @__PURE__ */ s(Se, { ...u });
case V.Time:
return /* @__PURE__ */ s(Ye, { ...u });
default:
return /* @__PURE__ */ s(Ve, { ...u });
}
};
return xe(ee, () => {
w && q();
}), J(() => {
if (t) {
const u = L(R(t, a, N, O));
E({
...v,
selectedDate: u,
viewDate: u.clone(),
ready: !0
});
} else
E({
...v,
ready: !0
});
}, [t, a, N, O]), v.ready ? /* @__PURE__ */ $(
"div",
{
className: se(),
ref: ee,
children: [
/* @__PURE__ */ s(
De,
{
showInput: p,
value: v.selectedDate,
dateFormat: N,
timeFormat: O,
inputProps: g,
openCalendar: ae,
closeCalendar: q,
timezoneOffset: a,
onInputChange: (u) => S == null ? void 0 : S(L(u).isValid() ? L(u) : u)
}
),
/* @__PURE__ */ s(
"div",
{
className: "nc-picker",
onClick: (u) => u.stopPropagation(),
children: b === !1 ? null : v.open ? me() : null
}
)
]
}
) : null;
};
export {
H as TimeConstraintsKeys,
V as ViewMode,
Ee as default
};