vant3.0.1 时间选择器

需要用到时间选择器记录一下,关于vant3时间选择器

    <van-field
        v-model="stateSJ.value"
        readonly
        clickable
        label="时间"
        placeholder="选择时间"
        @click="stateSJ.showPicker = true"
    />
    <van-popup v-model:show="stateSJ.showPicker" round position="bottom">
      <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择年月日时分"
          :columns-order="['year','month', 'day', 'hour','minute']"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @confirm="onConfirmSJ"
      />
    </van-popup>

 //时间选择器开始
    const stateSJ = reactive({
      value: '',
      showPicker: false,});//地区选择器
    let day = 1000*60*60*24;
    const currentDate = ref(new Date()); //选择器结果保存
    const formatter = (type, val) => { //选择器选项
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      if (type === 'hour') {
        return val + '时';
      }
      if (type === 'minute') {
        return val + '分';
      }
      return val;
    };
    const onConfirmSJ = (value) => {//时间选择器赋值
      stateSJ.value = value.getFullYear()+"年"+value.getMonth()+"月"+value.getDay()+"日"+value.getHours()+"时"+value.getMinutes()+"分"; //选择器部分时间格式化
      From.shijian = value.getFullYear()+"-"+value.getMonth()+"-"+value.getDay()+" "+value.getHours()+":"+value.getMinutes(); //回传后台时间格式化
      console.log(stateSJ.value)
      console.log(zsgcFrom.shijian)

      stateSJ.showPicker = false;
    };
    //时间选择器结束

vant3.0.1 时间选择器

Guess you like