<script lang="ts" setup> import { onMounted, ref, reactive, computed } from 'vue'; import { date } from 'quasar'; import { isEmpty } from 'src/common/utils'; interface Props { modelValue: string | null; format24h?: boolean; dense?: boolean; disable?: boolean; readonly?: boolean; config?: any; } const props = withDefaults(defineProps<Props>(), { // modelValue: date.formatDate(Date.now(), 'YYYY/MM/DD HH:mm'), modelValue: null, format24h: false, dense: false, disable: false, readonly: false, config: () => { return {}; }, }); const emit = defineEmits<{ (e: 'update:modelValue', value: string): void; }>(); const dates = computed({ set(value: any) { emit('update:modelValue', value); }, get() { // console.log('get', props.modelValue); return props.modelValue; }, }); const dateMask = computed(() => { let obj = { date: 'YYYY/MM/DD', time: 'HH:mm:ss', }; if (!isEmpty(props.config) && props.config.dateMask) { const maskList = props.config.dateMask.split(' '); obj.date = maskList[0]; obj.time = maskList[1] || ''; } return obj; }); const isWithSeconds = computed(() => { return dateMask.value.time.length > 6; }); // 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<any>(null); const timeProxyDate = ref<any>(null); 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(() => { // console.log('999', props.config); getNowDate(); }); function getNowDate() { dateProxyDate.value = date.formatDate(Date.now(), dateMask.value.date); timeProxyDate.value = date.formatDate(Date.now(), dateMask.value.time); } function updateProxy() { const _dates = dates.value; if (_dates) { const dateArr = _dates.split(' '); dateProxyDate.value = dateArr[0]; timeProxyDate.value = dateArr[1]; } else { dateProxyDate.value = null; timeProxyDate.value = null; } } function onClickDate() { let datesStr = dateProxyDate.value; if (timeProxyDate.value) { datesStr = `${dateProxyDate.value} ${timeProxyDate.value}`; } dates.value = datesStr; } </script> <template> <div class="hcy-datetime-pick"> <q-input v-model="dates" v-bind="config" :dense="config.dense === undefined ? props.dense : config.dense" :disable="config.disable === undefined ? props.disable : config.disable" :readonly=" config.readonly === undefined ? props.readonly : config.readonly " > <template v-slot:append> <q-icon name="event" class="cursor-pointer"> <q-popup-proxy v-if="!props.readonly" @before-show="updateProxy" transition-show="scale" transition-hide="scale" class="row" > <q-date flat square minimal v-model="dateProxyDate" :locale="dateLocale" :mask="dateMask.date" class="my-date" > <div class="row items-center justify-end q-gutter-sm" v-if="!dateMask.time" > <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-date> <q-time v-if="dateMask.time" flat square v-model="timeProxyDate" :mask="dateMask.time" :format24h="format24h" :with-seconds="isWithSeconds" 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>