[JavaScript知识库]Vue3+vant3 年月日 时间选择

?

?html

 <template v-if="mustInfo.idcardValidPeriod != '-1'">//这是做 是否显示及必填判断
        <van-field v-model="authInfo.startDate"
                   label-class="authTitle"
                   readonly
                   input-align="right"
                   label="起始有效期限"
                   placeholder="请选择起始日期"
                   @click="showPickerbtn1" />
        <van-popup v-model:show="showPicker1"
                   round
                   position="bottom">
          <van-datetime-picker v-model="currentDate"
                               type="date"
                               title="选择年月"
                               :min-date="minDate"
                               :max-date="maxDate"
                               :formatter="formatter"
                               @cancel="showPicker1 = false"
                               @confirm="getStartTime" />
        </van-popup>
      </template>
      <template v-if="mustInfo.idcardValidPeriod != '-1'">
        <van-field v-model="authInfo.endDate"
                   label-class="authTitle"
                   input-align="right"
                   readonly
                   label="结束有效期限"
                   placeholder="请选择结束日期"
                   @click="showPickerbtn2" />
        <van-popup v-model:show="showPicker2"
                   round
                   position="bottom">
          <van-datetime-picker v-model="currentDate"
                               type="date"
                               title="选择年月"
                               :min-date="minDate"
                               :max-date="maxDate"
                               :formatter="formatter"
                               @cancel="showPicker2 = false"
                               @confirm="getEndTime" />
        </van-popup>
      </template>

js

<script lang="ts">
import header from '../../components/header.vue'
import { fileUpload, cardByurl, enterfields } from '../../api/common/common'
import { accountInfo, saveidcard } from '@/api/validation/validation.js'
import {
  defineComponent,
  onMounted,
  computed,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { ElMessage } from 'element-plus'
import { Toast, Dialog } from 'vant'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  components: {
    'v-header': header,
  },
  setup() {
    const router = useRouter(),
      route = useRoute()
    const title = ref(route.meta?.title || '')
    let checked = ref(false) //长期有效开关
    let authInfo = ref({
      frontUrl: '', //身份证正面
      backUrl: '', //身份证反面
      name: '', //姓名
      cardNo: '', // 身份证号码
      startDate: '', //起始有效期
      endDate: '', //结束有效期
      hasLongTerm: 0, //是否长期有效

    })
     //展示开始时间弹框
    const showPickerbtn1 = () => {
      showPicker1.value = true
    }
    //展示结束时间弹框
    const showPickerbtn2 = () => {
      showPicker2.value = true
    }
    const currentDate = ref(new Date())
    //年月日处理
    const formatter = (type: string, val: number) => {
      if (type === 'year') {
        return `${val}年`
      }
      if (type === 'month') {
        return `${val}月`
      }
      if (type === 'day') {
        return val + '日'
      }
      return val
    }
    //获取起始时间
    const getStartTime = (value: any) => {
      let y = value.getFullYear()
      let m = value.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = value.getDate()
      d = d < 10 ? '0' + d : d
      value = y + '-' + m + '-' + d
      authInfo.value.startDate = value
      showPicker1.value = false
    }
    //获取结束时间
    const getEndTime = (value: any) => {
      let y = value.getFullYear()
      let m = value.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = value.getDate()
      d = d < 10 ? '0' + d : d
      value = y + '-' + m + '-' + d
      let start = new Date(authInfo.value.startDate)
      let end = new Date(value)
      //结束时间不能早于开始时间//超过则设为开始时间
      if (start.getTime() > end.getTime()) {
        authInfo.value.endDate = authInfo.value.startDate
      } else {
        authInfo.value.endDate = value
      }
      showPicker2.value = false
    }
return {
      title,
      authInfo,
      mustInfo,
      showPicker1,
      showPicker2,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2100, 10, 1),
      formatter,
      currentDate,
      //方法
      showPickerbtn1,
      showPickerbtn2,
      getStartTime,
      getEndTime,
    }
  },

//有些方法删掉了? 仅保留了日期控件处理??