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>