Vant Weappvan-calendar 日历

选择日期区间

默认样式

添加清空和确认

思路：

1. 将整个激活状态的的红色改成蓝色 color="#4c66da" 
2. 通过 show-confirm="{{ false }}"不展示默认的确定按钮。
3. 利用官方文档的中的slots自定义底部区域的内容
4. 通过onConfirm拿到拖拽后的日期，然后对他进行格式化，拿到我们需要的时间格式。
5. 通过onConfirmAll 关闭日历，这个时候通过上一步已经拿到时间值。如果取消的话，就清空所有的值，default默认值也要删除哦。

1.  
   <van-calendar
2.  
   color="#4c66da"
3.  
   show="{{ show }}"
4.  
   type="range"
5.  
   bind:close="onClose"
6.  
   bind:confirm="onConfirm"
7.  
   show-confirm="{{ false }}"
8.  
   default-date="{{default}}"
9.  
   >
10.  
    <div class="time_footer d-between" slot="footer">
11.  
    <div class="time_btn sure_btn d-center" bindtap="clearTimeAll">清空</div>
12.  
    <div class="time_btn d-center" bindtap="onConfirmAll">确定</div>
13.  
    </div>
14.  
    </van-calendar>

1.  
   .time_footer {
2.  
   padding: 20rpx;
3.  
   }
4.  
    
5.  
   .time_btn {
6.  
   color: #fff;
7.  
   background: #4c66da;
8.  
   border-color: #4c66da;
9.  
   border-radius: 36rpx;
10.  
    display: flex;
11.  
    width: 45%;
12.  
    height: 72rpx;
13.  
    }
14.  
     
15.  
    .sure_btn {
16.  
    background: #fff;
17.  
    border: 1rpx solid #323233;
18.  
    color: #323233;
19.  
    }

1.  
   data:{
2.  
   stime: '',
3.  
   etime:'',
4.  
   date:'',
5.  
   default:[],
6.  
   show: false
7.  
   }

1.  
   // 打开日历
2.  
   onOpen() {
3.  
   this.setData({ show: true });
4.  
   },
5.  
    
6.  
   // 关闭日历
7.  
   onClose() {
8.  
   this.setData({ show: false });
9.  
   },
10.  
     
11.  
    // 格式化时间
12.  
    formatDate(date) {
13.  
    date = new Date(date);
14.  
    return `${date.getFullYear()}-${this.format(date.getMonth() 1)}-${this.format(date.getDate())}`;
15.  
    },
16.  
     
17.  
    format(n) {
18.  
    return n < 10 ? '0' n : '' n
19.  
    },
20.  
     
21.  
    // 拖选区间后
22.  
    onConfirm(event) {
23.  
    const [start, end] = event.detail;
24.  
    this.setData({
25.  
    stime: this.formatDate(start),
26.  
    etime: this.formatDate(end),
27.  
    date: `${this.formatDate(start)} - ${this.formatDate(end)}`
28.  
    });
29.  
    },
30.  
     
31.  
    // 点击确认按钮
32.  
    onConfirmAll() {
33.  
    this.setData({
34.  
    show: false,
35.  
    });
36.  
    // 刷新列表
37.  
    this.getList()
38.  
    },
39.  
     
40.  
    // 点击取消按钮
41.  
    clearTimeAll() {
42.  
    this.setData({
43.  
    show: false,
44.  
    stime: '',
45.  
    etime: '',
46.  
    date: '',
47.  
    default:[]
48.  
    });
49.  
    // 刷新列表
50.  
    this.getList()
51.  
    },

这篇好文章是转载于：学新通技术网