van-datetime-picker循环每个item添加时间

川长思鸟来 2023-02-20 02:26 22阅读 0赞

<div>
      <div v-for="(item,index) in 3" :key="index">
         <strong><span class="span"></span>宝宝信息{
       {index+1}}</strong>
         <van-field readonly clickable name="datetimePicker" :value="item.birthday ? formatDate(item.birthday, 'YY/MM/DD/') : item.birthday" label="宝宝生日" placeholder="选择宝宝生日" @click="item.showBabyBri = true" />
         <van-popup v-model="item.showBabyBri" position="bottom">
           <van-datetime-picker type="date" v-model="item.currentDate" title="选择宝宝生日" :min-date="minDate" @confirm="onBabyConfirmTime(item)" @cancel="item.showBabyBri = false" />
         </van-popup>
       </div>
     </div>

data() { 
     return { 
       showPicker: false,
       minDate: new Date(2017, 0, 1),
       list: [
         { 
           index: 0,
           birthday: '', // 宝宝生日
           showBabyBri: false,
         }
       ]
     }
    },
    methods: { 
    onBabyConfirmTime(item) { 
      item.birthday = this.formatDate(item.currentDate, 'YY/MM/DD/');
      item.showBabyBri = false;
    },
    // 格式化时间
    formatDate(time,format='YY-MM-DD hh:mm:ss'){ 
       var date = new Date(time);
       var year = date.getFullYear(),
         month = date.getMonth()+1,//月份是从0开始的
         day = date.getDate(),
         hour = date.getHours(),
         min = date.getMinutes(),
         sec = date.getSeconds();
       var preArr = Array.apply(null,Array(10)).map(function(elem, index) { 
         return '0'+index;
       });开个长度为10的数组 格式为 00 01 02 03
    
       var newTime = format.replace(/YY/g,year)
                 .replace(/MM/g,preArr[month]||month)
                 .replace(/DD/g,preArr[day]||day)
                 .replace(/hh/g,preArr[hour]||hour)
                 .replace(/mm/g,preArr[min]||min)
                 .replace(/ss/g,preArr[sec]||sec);
    
       return newTime;
     },
    }