vant移动端日历组件如何设置后端传过来的日期才可选

 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>
posted @ 2022-12-20 14:53  全村最靓的程序猿  阅读(1087)  评论(0编辑  收藏  举报