vant组件时间选择器修改时间格式以及默认展示当天时间

时间:2025-04-05 19:12:25

vant的时间控件默认展示当天时间

<van-field
                      readonly
                      required
                      clickable
                      label=“时间事项"
                     :value="mattertimeValue"
                     placeholder=“选择时间"
                     :rules="[{required:true,trigger:‘onSubmit’,message:’请选择事项时间'}]"
                     @click="showmattertime=true"
 />
 <van-popup v-model="showmattertime" round position="bottom">
         <van-datetime-picker
                    v-model=“currentDate"
                    type="date"
                    title=“选择年月日"
                   :min-date="minDate"
                   :max-date=“maxDate"
                   @cancel="showmattertime=false"
                   @confirm="mattertimeConfirm"
/>
</van-popup>
data(){
      return{
               maxDate:new Date() // 不写具体的时间表示最大为当天
               minDate:new Date(1990,0,1)
      }
}
// 取当天时间,并将值绑定页面就会是当天的默认值
 getnewDate(){
            let nowdata=new Date();
            let year=();
            let month=()+1;
            let date=();
            let nowtime=year+"-";
            if(month<10){
                nowtime+="0"
            };
            nowtime+=month+"-";
            if(date<10){
                nowtime+="0"
            };
            nowtime+=date;
            // 是组件:value绑定的值
            =nowtime
        },
        
        // 时间下拉选择事件
        mattertimeConfirm(time){
            let nowdata=new Date();
            let year=();
            let month=()+1;
            let date=();
            let clock=year+"-";
            if(month<10){
                clock+="0"
            };
            clock+=month+"-";
            if(date<10){
                clock+="0"
            };
            clock+=date;
             // 是组件:value绑定的值
             // 是组件@cancel和click和v-model绑定的值
            =clock;
            =false
        }