<template>
<div class="calendar-div">
<div class="date-but">
<div>
<span class="but-left" @click="dateBtn(1)">取消</span>
</div>
<div>
<span class="but-right" @click="dateBtn(2)">确定</span>
</div>
</div>
<calendar :days-color="dayStyle" weeks-type="cn" @dayClick="dayClick"/>
</div>
</template>
<script>
export default {
data() { // 设置数据
return {
dateTime: null,
dayStyle: [
{month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5'},
// {month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5'}
],
}
},
props: { //接收传过来的数据
showMask: Boolean,
},
onUnload: function () { //页面销毁
this.pageClose();
},
onLoad() { //页面第一次加载
console.log('打开日期组件:', this.dateTime)
},
methods: { //方法
//给点击的日期设置一个背景颜色
dayClick: function (event) {
let day = event.target.day;
let month = event.target.month;
let year = event.target.year;
if (day < 10) {
day = '0' + day;
}
if (month < 10) {
month = '0' + month;
}
this.dayStyle = [{month: 'current', day: day, color: 'white', background: '#AAD4F5'}];
this.dateTime = year + '-' + month + '-' + day;
console.log(this.dateTime)
},
dateBtn(type) {
let json = {
showMask: !this.showMask,
dateTime: type === 1 ? null : this.dateTime,
}
console.log('日期选择:', type, '传递数据:', json)
this.$emit('myDateChange', json)
},
pageClose() { //页面销毁
},
}
}
</script>
<style lang="scss" scoped>
.calendar {
background-color: white; /*背景色为白色*/
padding-top: 10px; /*上内边距为10px*/
color: #38ACFF;
border-radius: 15px; /*添加边框圆角*/
border: 1px solid #38ACFF;
-webkit-box-shadow: 0 0 10px #38ACFF;
-moz-box-shadow: 0 0 10px #38ACFF;
box-shadow: 0 0 10px #38ACFF;
}
.calendar-div {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
padding: 10px 0;
background-color: white;
}
.date-but {
display: flex;
color: white;
}
.date-but div {
width: 50%;
}
.date-but .but-left {
margin-left: 10px;
float: left;
padding: 4px 8px;
background-color: #FFB800;
border-radius: 5px;
}
.date-but .but-right {
margin-right: 10px;
float: right;
padding: 4px 8px;
background-color: #1E9FFF;
border-radius: 5px;
}
</style>