soc_app/src/components/dateCell/index.vue

<template>
  <div class="date-cell">
    <van-cell :title="title" is-link :label="selected" @click="clickItem"/>
    <van-popup v-model="showPicker" round  position="bottom" :close-on-popstate="true" get-container="#app">
      <van-datetime-picker
        v-bind="$attrs"
        show-toolbar
        :type="dateType"
        :columns="columns"
        @cancel="cancelPicker"
        @confirm="pickerConfirm"
      />
    </van-popup>
  </div>
</template>

<script>

import dayjs from "dayjs";

export default {
  props:{
    //默认值
    value:{
      type: String,
      default: null,
    },
    //标题
    title:{
      type: String,
      default: null,
    },
    //时间类型，见van-datetime-picker
    dateType:{
      type: String,
      default: 'time',
    },
    //时间格式 个别模式下不启用
    format:{
      type: String,
      default: 'YYYY-MM-DD',
    }
  },
  data(){
    return{
      showPicker:false,
      selected:null,
      columns: [],
    }
  },
  watch:{
    value:{
      handler (val) {
        console.log(val,'val111')
        if(!val){
          this.selected = null
        }else{
          this.selected = val;
        }
      },
      immediate: true
    }
  },
  methods:{
    cancelPicker(){
      this.showPicker = false;
    },
    pickerConfirm(val){
      console.log(val,'val')
      if(this.dateType === 'time' || this.dateType === 'year-month' || this.dateType === 'month-day') {
        this.selected = val;
      }else {
        this.selected = dayjs(val).format(this.format) ;
      }
      this.showPicker = false;
      this.$emit('change',this.selected)
    },
    clickItem(){
      this.showPicker = true;
    },
  },
  model:{
    prop: 'value',
    event: 'change',
  }
}
</script>

<style scoped>

</style>