client-admin/src/render/components/VerticalDateRange/index.vue

<template>
  <div class="vertical-date-range">
    <div class="flex items-center">
      <span class="label">开始时间：</span>
      <date-picker
        v-model:value="startTime"
        placeholder="开始时间"
        :show-time="showTimeStart"
        :size="props.size || 'large'"
        :locale="locale"
        :disabled-date="disabledDateStart"
        :show-now="false"
      ></date-picker>
    </div>
    <div class="flex items-center mt-8px">
      <span class="label">结束时间：</span>
      <date-picker
        v-model:value="endTime"
        placeholder="结束时间"
        :show-time="showTimeEnd"
        :size="props.size || 'large'"
        :locale="locale"
        :disabled-date="disabledDateEnd"
        :show-now="false"
      ></date-picker>
    </div>
  </div>
</template>
<script lang="ts" name="VerticalDateRange" setup>
import { DatePicker, FormItemRest } from "ant-design-vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { ref, watch } from "vue";
import { useVModel } from "@/hooks/useVModal";

const emit = defineEmits(["change"]);
const props = withDefaults(
  defineProps<{
    modelValue: any;
    size?: "large" | "middle" | "small";
    splitText?: string;
    valueFormat?: "timestamp" | string;
    type?: "date" | "datetime";
  }>(),
  {
    modelValue: () => [],
    size: "middle",
    splitText: "至",
    // valueFormat: "YYYYMMDDHHmmss",
    valueFormat: "timestamp",
    type: "datetime",
  }
);
const time = useVModel(props);
const _time = ref([]);

const startTime = ref(dayjs(time.value[0]));
const endTime = ref(dayjs(time.value[1]));

const showTimeStart =
  props.type === "datetime"
    ? { defaultValue: dayjs("00:00:00", "HH:mm:ss") }
    : undefined;
const showTimeEnd =
  props.type === "datetime"
    ? { defaultValue: dayjs("23:59:59", "HH:mm:ss") }
    : undefined;

watch([startTime, endTime], (arr: any) => {
  _time.value = arr.map((item: any) => (item ? item.toDate() : undefined));
  time.value = arr.map((item: any) =>
    item
      ? props.valueFormat === "timestamp"
        ? props.type === "datetime"
          ? item.toDate().getTime()
          : item.startOf("date").toDate().getTime()
        : props.type === "datetime"
        ? item.format(props.valueFormat)
        : item.endOf("date").format(props.valueFormat)
      : undefined
  );
  emit("change", [...time.value]);
});
const disabledDateStart = (current: any) => {
  if (!_time.value[0] && !_time.value[1]) {
    return false;
  } else {
    if (_time.value[1]) {
      return current > _time.value[1];
    } else {
      return false;
    }
  }
};
const disabledDateEnd = (current: any) => {
  if (!_time.value[0] && !_time.value[1]) {
    return false;
  } else {
    if (_time.value[0]) {
      return current < _time.value[0];
    } else {
      return false;
    }
  }
};
</script>
<style lang="less" scoped>
.vertical-date-range {
  span.label {
    color: @text-color2;
  }
}
.split-txt {
  margin-left: 11px;
  margin-right: 11px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
}
</style>