DateTimePick.vue

<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue';
import { date } from 'quasar';

interface Props {
  modelValue: string;
  format24h?: boolean;
  withSeconds?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm'),
  format24h: false,
  withSeconds: false,
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const dates = computed({
  set(value: string) {
    emit('update:modelValue', value);
  },
  get() {
    return props.modelValue;
  },
});

const timeMask = computed(() => {
  if (props.withSeconds) {
    return 'HH:mm:ss';
  } else {
    return 'HH:mm';
  }
});

const dateRules = computed(() => {
  let dateRegular: RegExp;
  if (props.withSeconds) {
    dateRegular =
      /^-?[\d]+\/[0-1]\d\/[0-3]\d ([0-1]?\d|2[0-3]):[0-5]\d:[0-5]\d$/;
  } else {
    dateRegular = /^-?[\d]+\/[0-1]\d\/[0-3]\d (\d{2}):(\d{2})$/;
  }
  return [(v: string) => dateRegular.test(v)];
});

const dateProxyDate = ref('');
const timeProxyDate = ref('');
const dateLocale = reactive({
  daysShort: '六_日_一_二_三_四_五'.split('_'),
  months:
    '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
      '_'
    ),
  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
  firstDayOfWeek: 1,
  format24h: true,
  pluralDay: 'dias',
});

onMounted(() => {
  getNowDate();
});

function getNowDate() {
  dateProxyDate.value = date.formatDate(Date.now(), 'YYYY/MM/DD');
  timeProxyDate.value = date.formatDate(Date.now(), timeMask.value);
}

function updateProxy() {
  const _dates = dates.value;
  const dateArr = _dates.split(' ');

  dateProxyDate.value = dateArr[0];
  timeProxyDate.value = dateArr[1];
}

function onClickDate() {
  const datesStr = `${dateProxyDate.value} ${timeProxyDate.value}`;
  dates.value = datesStr;
}
</script>
<template>
  <div class="hcy-datetime-pick">
    <q-input filled dense v-model="dates" :rules="dateRules">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy
            @before-show="updateProxy"
            transition-show="scale"
            transition-hide="scale"
            class="row"
          >
            <q-date
              flat
              square
              minimal
              v-model="dateProxyDate"
              :locale="dateLocale"
              mask="YYYY/MM/DD"
              class="my-date"
            >
            </q-date>
            <q-time
              flat
              square
              v-model="timeProxyDate"
              :mask="timeMask"
              :format24h="format24h"
              :with-seconds="withSeconds"
              text-color="primary"
              class="my-time"
            >
              <div class="row items-center justify-end q-gutter-sm">
                <q-btn
                  label="此刻"
                  size="sm"
                  color="primary"
                  flat
                  @click="getNowDate"
                />
                <q-btn
                  unelevated
                  label="确定"
                  size="sm"
                  color="primary"
                  @click="onClickDate"
                  v-close-popup
                />
              </div>
            </q-time>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

<style lang="scss" scoped>
.my-date {
  :deep(.q-date__main .q-date__content .q-date__view .q-date__navigation) {
    > .relative-position {
      color: $primary;
    }
  }
}
.my-time {
  :deep(.q-time__header) {
    background-color: white;
  }
  :deep(.q-time__main
      .q-time__content
      .q-time__container-child
      .q-time__clock
      .q-time__clock-circle
      .q-time__clock-position--active) {
    color: white !important;
  }
}
</style>