vue2.0(vant-calendar)

时间:2021-08-25
本文章向大家介绍vue2.0(vant-calendar),主要包括vue2.0(vant-calendar)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

vant-calendar

改造日历组件,需求图

@select选择日期触发,@confirm确认按钮触发

<template>
  <div>
    <!-- 时间筛选 -->
    <van-calendar
      ref="calendar"
      v-model="dateShow"
      type="range"
      @confirm="onConfirm"
      @select="onSelect"
      color="#FF7F00"
      :min-date="new Date(2015, 0, 0)"
      :max-date="new Date()"
    >
      <template #footer>
        <div class="condition-footer">
          <van-button color="#FF9100" plain @click="onCancel">取消</van-button>
          <van-button color="#FF9100" @click="onConfirm" :disabled="disabled"
            >确定</van-button
          >
        </div>
      </template>
    </van-calendar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startDate: "",
      endDate: ""
    };
  },
  created() {
  },
  methods: {
    // 日期转换0000-00-0格式
    formatDate(e) {
      var y = e.getFullYear();
      var m = e.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = e.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    // 点击日期:时间区间
    onSelect() {
      let date = this.$refs.calendar.currentDate;
      this.disabled = date[1] != null ? false : true;
    },
    // 重置按钮:时间区间
    onCancel() {
      this.$refs.calendar.reset(); //重置日历已选择的时间,默认到今天
      this.startDate = "";
      this.endDate = "";
      this.disabled = true;
    },
    // 确认按钮:时间区间
    onConfirm() {
      let date = this.$refs.calendar.currentDate;
      this.startDate = this.formatDate(date[0]);
      this.endDate = this.formatDate(date[1])
    }
  }
};
</script>
<style lang="less" scoped>
.condition-footer {
  position: fixed;
  bottom: 0;
  padding: 0.2rem 0;
  display: flex;
  background: #ffffff;
  button {
    width: 16.7rem;
    height: 4rem;
    margin-right: 0.9rem;
  }
}
/deep/ .van-calendar__day--middle::after {
  background-color: #fff7e6;
}
</style>
眼睛如果有等级,那么青色一定最高贵,黑色最深邃

原文地址:https://www.cnblogs.com/black-eyes/p/15183934.html