【Vant Weapp】van-calendar 日历

选择日期区间

默认样式

添加清空和确认

思路：

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

<van-calendar
  color="#4c66da"
  show="{{ show }}"
  type="range"
  bind:close="onClose"
  bind:confirm="onConfirm"
  show-confirm="{{ false }}"
  default-date="{{default}}"
>
  <div class="time_footer d-between" slot="footer">
    <div class="time_btn sure_btn d-center" bindtap="clearTimeAll">清空</div>
    <div class="time_btn d-center" bindtap="onConfirmAll">确定</div>
  </div>
</van-calendar>

.time_footer {
  padding: 20rpx;
}

.time_btn {
  color: #fff;
  background: #4c66da;
  border-color: #4c66da;
  border-radius: 36rpx;
  display: flex;
  width: 45%;
  height: 72rpx;
}

.sure_btn {
  background: #fff;
  border: 1rpx solid #323233;
  color: #323233;
}

data:{
    stime: '',
    etime:'',
    date:'',
    default:[],
    show: false
}

// 打开日历
onOpen() {
  this.setData({ show: true });
},

// 关闭日历
onClose() {
  this.setData({ show: false });
},

// 格式化时间
formatDate(date) {
  date = new Date(date);
  return `${date.getFullYear()}-${this.format(date.getMonth() + 1)}-${this.format(date.getDate())}`;
},

format(n) {
  return n < 10 ? '0'+n : ''+n
},

// 拖选区间后
onConfirm(event) {
  const [start, end] = event.detail;
  this.setData({
    stime: this.formatDate(start),
    etime: this.formatDate(end),
    date: `${this.formatDate(start)} - ${this.formatDate(end)}`
  });
},

// 点击确认按钮
onConfirmAll() {
  this.setData({
    show: false,
  });
  // 刷新列表
  this.getList()
},

// 点击取消按钮
clearTimeAll() {
  this.setData({
    show: false,
    stime: '',
    etime: '',
    date: '',
    default:[]
  });
  // 刷新列表
  this.getList()
},