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>