69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<div id="app">
|
|
<WCalendar
|
|
class="calendar"
|
|
:Month="monthValue"
|
|
:is-multiple-choice="false"
|
|
:pointMap="pointMap"
|
|
|
|
@chooseDays="chooseDays"
|
|
>
|
|
<template v-slot:left>
|
|
<el-date-picker
|
|
v-model="monthValue"
|
|
type="month"
|
|
format="yyyy-MM"
|
|
value-format="yyyy-MM"
|
|
placeholder="选择月份"
|
|
>
|
|
</el-date-picker>
|
|
</template>
|
|
</WCalendar>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Vue from "vue";
|
|
import WCalendar from "wqcalendar";
|
|
import "wqcalendar/dist/wqcalendar.css";
|
|
Vue.use(WCalendar);
|
|
export default {
|
|
data() {
|
|
/**
|
|
* 获取当天时间
|
|
* @returns {string}
|
|
*/
|
|
function getCurDay(num = 0) {
|
|
var datetime = new Date();
|
|
var year = datetime.getFullYear();
|
|
var month =
|
|
datetime.getMonth() + 1 < 10
|
|
? "0" + (datetime.getMonth() + 1)
|
|
: datetime.getMonth() + 1;
|
|
let day = datetime.getDate();
|
|
if (day + num > 0) {
|
|
day =
|
|
day + num < 10
|
|
? "0" + (datetime.getDate() + num)
|
|
: datetime.getDate() + num;
|
|
} else {
|
|
day =
|
|
day - num < 10
|
|
? "0" + (datetime.getDate() - num)
|
|
: datetime.getDate() - num;
|
|
}
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
return {
|
|
monthValue: "",
|
|
pointMap: { [new Date(getCurDay()).getTime()]: true },
|
|
restrictDate: { 4: [getCurDay(), getCurDay(+10)] },
|
|
};
|
|
},
|
|
methods: {
|
|
chooseDays(list) {
|
|
console.log(list);
|
|
},
|
|
},
|
|
};
|
|
</script>
|