1 <template> 2 <div id="homeBox"> 3 <van-cell title="选择多个日期" @click="show = true" /> 4 <van-calendar 5 v-model="show" 6 :formatter="formatter" 7 :min-date="minDate" 8 :max-date="maxDate" 9 @confirm="onConfirm" 10 /> 11 </div> 12 </template> 13 <script> 14 export default { 15 data() { 16 return { 17 show: false, 18 minDate: new Date(2010, 0, 1), //可选最早时间 19 maxDate: new Date() 20 }; 21 }, 22 mounted() { 23 this.getDateList(); 24 }, 25 methods: { 26 //这边主要处理不可选日期的禁选变灰 27 formatter(day) { 28 // console.log(this.$store.state.datelist); 29 var now = new Date(day.date); 30 var year = now.getFullYear(); //得到年份 31 var month = now.getMonth(); //得到月份 32 var date = now.getDate(); //得到日期 33 month = month + 1; 34 if (month < 10) month = '0' + month; 35 if (date < 10) date = '0' + date; 36 var time = year + '-' + month + '-' + date; //(格式化"yyyy-MM-dd") 38 if (this.$store.state.datelist.includes(time)) { 39 // return time; 40 // console.log(day.date); 41 } else { 42 day.type = 'disabled'; 43 } 44 return day 45 }, 46 47 //格式化日期 48 formatDate(date) { 49 console.log(date); 50 return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; 51 }, 52 53 //点击确认按钮获取所选日期 54 onConfirm(date) { 55 console.log(this.formatDate(date)); 56 this.show = false; 57 }, 58 59 // 获取可选时间 60 getDateList() { 61 let that = this; 62 that.$axios.get('可选日期的接口').then((res) => { 63 const list_date = res.data.ResultData; 64 that..datelist = [...list_date]; 65 }); 66 } 67 } 68 }; 69 </script>标签:return,vant,日历,month,var,日期,传过来,date,day From: https://www.cnblogs.com/chenzhengyang/p/16994191.html