@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 D, openBlock as P, createElementBlock as T, createElementVNode as n, createVNode as s, withCtx as i, toDisplayString as m, unref as y, renderSlot as _, createTextVNode as b } from "vue";
import l from "dayjs";
import { useI18n as A } from "../../language/index.js";
import h from "./common/Time.js";
import F from "./common/Footer.js";
import N from "./common/Shortcuts.js";
import { useShortcutsRange as I } from "../hook/useShortcutsRange.js";
const O = { class: "layui-laydate layui-laydate-range" }, j = { 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: {} }, emits: ["pick"], setup(g, { emit: B }) {
  const a = g, V = B, { t: u } = A(), x = I(), t = v(), o = v(), d = (e) => 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;
  D(() => a.modelValue, () => {
    const [e, r] = a.modelValue;
    t.value = e || d(l()), o.value = r || d(l().add(1, "hour"));
  }, { immediate: !0 });
  const S = (e) => {
    e.isSameOrAfter(o.value) ? (t.value = o.value, o.value = e) : t.value = e;
  }, w = (e) => {
    e.isSameOrBefore(t.value) ? (o.value = t.value, t.value = e) : o.value = e;
  }, k = (e) => {
    const r = x(e);
    t.value = r[0], o.value = r[1], a.simple && p();
  }, p = () => {
    V("pick", [t.value, o.value]);
  };
  return (e, r) => (P(), T("div", O, [n("div", j, [s(N, { onChangeShortcut: k }), s(h, { modelValue: t.value, showDate: t.value, onPick: S }, { header: i(() => [n("span", E, m(y(u)("datePicker.startTime")), 1)]), _: 1 }, 8, ["modelValue", "showDate"]), s(h, { modelValue: o.value, showDate: o.value, onPick: w }, { header: i(() => [n("span", R, m(y(u)("datePicker.endTime")), 1)]), _: 1 }, 8, ["modelValue", "showDate"])]), s(F, { showNow: !1, onConfirm: p }, { default: i(() => [_(e.$slots, "footer", {}, () => {
    var c, f;
    return [b(m((c = t.value) == null ? void 0 : c.format(a.inputFormat)) + " " + m(a.rangeSeparator) + " " + m((f = o.value) == null ? void 0 : f.format(a.inputFormat)), 1)];
  })]), _: 3 })]));
} });
export {
  L as default
};