noob-components/packages/base/item/tzDatePicker.vue

<template>
  <el-date-picker v-model="model" />
</template>

<script setup lang="ts">
import { ElDatePicker } from "element-plus";
import dayjs, { type Dayjs } from "dayjs";
import { nextTick, toRef, watch, watchEffect } from "vue";
import { watchEffectOnce } from "../../../plugs/composables";

interface Props {
  valueType: "iso8601" | "unix" | "unixMillis";
  tz?: string;
  keepMillis?: boolean;
}

const props = defineProps<Props>();

watchEffectOnce(toRef(props, "tz"), async () => {
  const timeZone = await import("dayjs/plugin/timezone");
  dayjs.extend(timeZone.default);
});

const model = defineModel<string | number, string, Date, Date>({
  get: (value) => {
    let dt: Dayjs;
    if (props.valueType === "unix" || props.valueType === "unixMillis") {
      if (typeof value === "string") {
        value = parseFloat(value);
      }
      dt = props.valueType === "unix" ? dayjs.unix(value) : dayjs(value);
    } else {
      dt = dayjs(value);
    }

    return dt.toDate();
  },
  set: (value) => {
    const dt = dayjs(value);
    if (props.valueType === "unix") {
      return dt.unix();
    } else if (props.valueType === "unixMillis") {
      return dt.valueOf();
    } else if (props.valueType === "iso8601" && props.tz) {
      const fmt = props.keepMillis ? "YYYY-MM-DDTHH:mm:ss.SSSZ" : "YYYY-MM-DDTHH:mm:ssZ";
      return dt.tz(props.tz).format(fmt);
    } else {
      const isoWithMillis = dt.toISOString();
      if (props.keepMillis) return isoWithMillis;
      else return isoWithMillis.slice(0, 19).concat("Z");
    }
  },
  default: () => new Date(),
});
</script>