vue日历组件

1.WeekCalendar.vue

<template>
  <div class="yh-week-calendar">
    <div class="yh-calendar-item">
      <div style="text-align:center;font-weight:bold">{{days[0].dateObj.getMonth() + 1}}月</div>
      <div>
        <yh-button @click="onPrev" class="yh-icon" style="color:#999">〈</yh-button>
      </div>
    </div>
    <div
      class="yh-calendar-item"
      v-for="(item, index) in days"
      :class="{'yh-select':selected == index}"
      :key="item.dateStr"
      @click="onSelect(index, $event)"
    >
      <div style="padding-top:8px;">{{weekNames[index]}}</div>
      <div
        :class="{'yh-today':item.today, 'yh-highlight':item.highlight}"
        class="yh-date-icon"
      >{{item.date}}</div>
    </div>
    <div class="yh-calendar-item">
      <div>
        <yh-button @click="onNext" class="yh-icon" style="color:#999">〉</yh-button>
      </div>
    </div>
  </div>
</template>
<script>
import yhbutton from "./Button";
function _format_date(date) {
  var d = date.getDate();
  var m = date.getMonth() + 1;
  var y = date.getFullYear();
  return "" + y + "-" + (m <= 9 ? "0" + m : m) + "-" + (d <= 9 ? "0" + d : d);
}

function _diff(date, days) {
  return new Date(date.getTime() + days * 24 * 60 * 60 * 1000);
}

function _same_day(d1, d2) {
  return (
    d1.getYear() == d2.getYear() &&
    d1.getMonth() == d2.getMonth() &&
    d1.getDate() == d2.getDate()
  );
}

function _week_days(date) {
  var arr = [];
  var day = date.getDay();
  var today = new Date();
  for (var i = 0; i < 7; ++i) {
    var e = {};
    var obj = day == i ? date : _diff(date, i - day);
    e.today = _same_day(obj, today);
    e.date = obj.getDate();
    e.dateStr = _format_date(obj);
    e.dateObj = obj;
    arr.push(e);
  }
  return arr;
}

export default {
  name: "WeenCalendar",
  data() {
    return {
      weekNames: ["日", "一", "二", "三", "四", "五", "六"],
      days: [],
      selected: -1,
      highlights: {}
    };
  },
  props: [],
  created() {
    this.days = _week_days(new Date());
    var vm = this;
    this.$on("change", function() {
      vm.updateHighlights();
    });
  },
  methods: {
    onPrev() {
      var d = this.days[0].dateObj;
      this.days = _week_days(_diff(d, -1));
      this.selected = -1;
      this.$emit("change", this.range());
    },
    onNext() {
      var d = this.days[6].dateObj;
      this.days = _week_days(_diff(d, 1));
      this.selected = -1;
      this.$emit("change", this.range());
    },
    updateHighlights() {
      var days = this.highlights;
      var empty = days == undefined || days.length == 0;
      var list = this.days;
      var vm = this;
      list.forEach(function(e) {
        var h = empty ? false : days.indexOf(e.dateStr) >= 0;
        vm.$set(e, "highlight", h);
      });
    },
    setHighlights(days) {
      this.highlights = days;
      this.updateHighlights();
    },
    onSelect(index, e) {
      e.preventDefault();
      e.stopPropagation();
      if (index !== this.selected) {
        this.selected = index;
        var d = this.days[index];
        this.$emit("select", { date: d.dateStr, today: true, index: index });
      }
    },
    range() {
      var days = this.days;
      return {
        begin: days[0].dateStr,
        end: days[6].dateStr
      };
    }
  },
  components: {
    "yh-button": yhbutton
  }
};
</script>
<style scoped>
</style>

2.WeekCalendarDemo.vue

<template>
  <div class="yh-page">
    <h1>日历演示</h1>
    <div class="desc">Demo源代码：
      <code>/examples/components/modules/WeekCalendarDemo.vue</code>
    </div>
    <div class="yh-desc yh-block">
      <yh-week-calendar ref="cal" @select="onSelect" @change="onChange" class="WeekCalendar"></yh-week-calendar>
      <div>
        <ul>
          <li>范围：{{begin}} ~ {{end}}</li>
          <li>选中日期：{{date}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import weekcalendar from "../comcompont/WeekCalendar";
export default {
  name: "WeekCalendarDemo",
  data() {
    return {
      date: "",
      begin: "",
      end: ""
    };
  },
  methods: {
    onSelect(date) {
      this.date = date.date;
    },
    onChange(r) {
      this.begin = r.begin;
      this.end = r.end;
    }
  },
  mounted() {
    var r = this.$refs.cal.range();
    this.begin = r.begin;
    this.end = r.end;
    this.$refs.cal.setHighlights(["2018-10-31", "2018-11-02"]);
  },
  components: {
    "yh-week-calendar": weekcalendar
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
.WeekCalendar{
	width: 100%;
}
</style>