@layui/layui-vue/es/datePicker/component/TimeRange.js

a component library for Vue 3 base on layui-vue

import { defineComponent as C, ref as v, watch as P, openBlock as T, createElementBlock as _, createElementVNode as m, createVNode as s, withCtx as i, toDisplayString as n, unref as y, renderSlot as b, createTextVNode as A } from "vue";
import l from "dayjs";
import { useI18n as F } from "../../language/index.js";
import { useShortcutsRange as O } from "../hook/useShortcutsRange.js";
import I from "./common/Footer.js";
import N from "./common/Shortcuts.js";
import h from "./common/Time.js";
const j = { class: "layui-laydate layui-laydate-range" }, D = { class: "layui-laydate-range-main" }, E = { class: "laydate-time-text" }, R = { class: "laydate-time-text" }, L = C({ __name: "TimeRange", props: { modelValue: {}, size: {}, type: {}, disabled: { type: Boolean }, readonly: { type: Boolean }, allowClear: { type: Boolean }, simple: { type: Boolean }, range: { type: Boolean }, rangeSeparator: {}, prefixIcon: {}, suffixIcon: {}, timestamp: { type: Boolean }, yearPage: {}, name: {}, placeholder: {}, max: {}, min: {}, format: {}, inputFormat: {}, defaultValue: {}, defaultTime: {}, contentStyle: { type: [Boolean, null, String, Object, Array] }, contentClass: {}, disabledDate: {}, shortcuts: {}, static: { type: Boolean }, teleportProps: {} }, emits: ["pick"], setup(B, { emit: g }) {
  const a = B, x = g, { t: u } = F(), S = O(), t = v(), o = v();
  function d(e) {
    return e.isBefore(l(a.min, a.format)) ? l(a.min, a.format) : e.isAfter(l(a.max, a.format)) ? l(a.max, a.format) : e;
  }
  function w(e) {
    e.isSameOrAfter(o.value) ? (t.value = o.value, o.value = e) : t.value = e;
  }
  function k(e) {
    e.isSameOrBefore(t.value) ? (o.value = t.value, t.value = e) : o.value = e;
  }
  function V(e) {
    const r = S(e);
    t.value = r[0], o.value = r[1], a.simple && p();
  }
  function p() {
    x("pick", [t.value, o.value]);
  }
  return P(() => a.modelValue, () => {
    const [e, r] = a.modelValue;
    t.value = e || d(l()), o.value = r || d(l().add(1, "hour"));
  }, { immediate: !0 }), (e, r) => (T(), _("div", j, [m("div", D, [s(N, { onChangeShortcut: V }), s(h, { "model-value": t.value, "show-date": t.value, onPick: w }, { header: i(() => [m("span", E, n(y(u)("datePicker.startTime")), 1)]), _: 1 }, 8, ["model-value", "show-date"]), s(h, { "model-value": o.value, "show-date": o.value, onPick: k }, { header: i(() => [m("span", R, n(y(u)("datePicker.endTime")), 1)]), _: 1 }, 8, ["model-value", "show-date"])]), s(I, { "show-now": !1, onConfirm: p }, { default: i(() => [b(e.$slots, "footer", {}, () => {
    var c, f;
    return [A(n((c = t.value) == null ? void 0 : c.format(a.inputFormat)) + " " + n(a.rangeSeparator) + " " + n((f = o.value) == null ? void 0 : f.format(a.inputFormat)), 1)];
  })]), _: 3 })]));
} });
export {
  L as default
};