ieplus-app/src/pagesOther/pages/topic-center/wrong-book/components/datetime-picker.vue

<template>
  <view class="bg-white py-20 px-30 text-26 ">
    <view class="h-50 p-10 flex items-center gap-x-10  border border-[#999999] border-solid rounded-6"
      @click="handlePicker">
      <uv-icon name="calendar" size="20" color="#999999" />
      <text class="flex-1 text-center" :class="[startDate ? 'text-fore-title' : 'text-[#999999]']">
        {{ startDate || '开始日期' }}
      </text>
      <text class="text-[#999999]">至</text>
      <text class="flex-1 text-center" :class="[endDate ? 'text-fore-title' : 'text-[#999999]']">
        {{ endDate || '结束日期' }}
      </text>
      <view class="w-44">
        <uv-icon name="close-circle" size="20" color="#999999" v-if="startDate || endDate" @click.stop="handleClear" />
      </view>
    </view>
  </view>
  <ie-popup ref="popupRef" title="选择日期" @confirm="handleConfirm">
    <uni-calendar ref="calendarRef" :insert="true" :lunar="false" :range="true" :showMonth="false"
      :showExtraInfo="false" start-date="" end-date="" @change="handleChange"></uni-calendar>
  </ie-popup>
</template>
<script lang="ts" setup>
const emit = defineEmits<{
  (e: 'change', value: { startDate: string, endDate: string }): void
}>();

const startDate = defineModel<string>('startDate', { required: true });
const endDate = defineModel<string>('endDate', { required: true });

const currentStartDate = ref('');
const currentEndDate = ref('');
const handleChange = (e: any) => {
  const { before, after } = e.range;
  if (before && after) {
    currentStartDate.value = before;
    currentEndDate.value = after;
  }
}
const popupRef = ref();
const handlePicker = () => {
  popupRef.value.open()
}
const handleClear = () => {
  currentStartDate.value = ''
  currentEndDate.value = ''
  updateDate();
}
const updateDate = () => {
  startDate.value = currentStartDate.value;
  endDate.value = currentEndDate.value;
  setTimeout(() => {
    emit('change', { startDate: startDate.value, endDate: endDate.value });
  }, 0);
}
const handleConfirm = () => {
  updateDate();
  popupRef.value.close();
}
</script>
<style lang="scss" scoped></style>