vue周日历组件
<template><div class="date"><!-- 年份 月份 --><div class="month"><Icon color="#ff9900" type="ios-arrow-back" size="30" @click="weekPre"/><spa...
·
<template>
<div class="date">
<!-- 年份 月份 -->
<div class="month">
<Icon color="#ff9900" type="ios-arrow-back" size="30" @click="weekPre"/>
<span>{{ behindDate }}</span>至<span>{{ frontDate }}</span>
<Icon color="#ff9900" type="ios-arrow-forward" size="30" @click="weekNext"/>
</div>
<!-- 星期 -->
<Row class="week">
<div class="float-div" v-for="week in weeks" :key="week">{{week}}</div>
</Row>
<!-- 日期 -->
<Row class="days">
<div @click="pick(day)" v-for="(day, index) in days" :key="index">
<div class="days-border">
<!--其他-->
<div v-if="day.getMonth()+1 != currentMonth" class="other-month">
{{ day.getDate() }}
</div>
<!--今天-->
<div v-else>
<div v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">
{{ day.getDate() }}
</div>
<!--本月-->
<div v-else>
{{ day.getDate() }}
</div>
</div>
<div style="margin-left: 100px">
<Badge :count="1000" overflow-count="999">
<a href="#" class="demo-badge"></a>
</Badge>
</div>
</div>
</div>
</Row>
</div>
</template>
<script>
// https://www.cnblogs.com/whitewen/articles/9509845.html
export default {
name: 'week-date',
data () {
return {
currentYear: 1970,
currentMonth: 1,
currentDay: 1,
currentWeek: 1,
days: [],
weeks: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
behindDate: '',
frontDate: ''
}
},
mounted () {
},
created () {
this.initData(null)
},
methods: {
formatDate (year, month, day) {
const y = year
let m = month
if (m < 10) m = `0${m}`
let d = day
if (d < 10) d = `0${d}`
return `${y}-${m}-${d}`
},
initData (cur) {
let date = ''
if (cur) {
date = new Date(cur)
} else {
date = new Date()
}
// 今日日期 几号
this.currentDay = date.getDate()
// 当前年份
this.currentYear = date.getFullYear()
// 当前月份
this.currentMonth = date.getMonth() + 1
this.currentWeek = date.getDay()
// 1...6,0 // 星期几
if (this.currentWeek === 0) {
this.currentWeek = 7
}
const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)// 今日日期 年-月-日
this.days.length = 0
// 今天是周日,放在第一行第7个位置,前面6个 这里默认显示一周,如果需要显示一个月,则第二个循环为 i<= 35- this.currentWeek
/* eslint-disabled */
for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
const d = new Date(str)
d.setDate(d.getDate() - i)
this.days.push(d)
}
for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
const d = new Date(str)
d.setDate(d.getDate() + i)
this.days.push(d)
}
this.behindDate = this.formatDate(this.days[0].getFullYear(), this.days[0].getMonth() + 1, this.days[0].getDate())
this.frontDate = this.formatDate(this.days[6].getFullYear(), this.days[6].getMonth() + 1, this.days[6].getDate())
},
// 上个星期
weekPre () {
// 如果当期日期是7号或者小于7号
const d = this.days[0]
d.setDate(d.getDate() - 7)
this.initData(d)
},
// 下个星期
weekNext () {
// 如果当期日期是7号或者小于7号
const d = this.days[6]
d.setDate(d.getDate() + 7)
this.initData(d)
},
// 上一個月 传入当前年份和月份
pickPre (year, month) {
const d = new Date(this.formatDate(year, month, 1))
d.setDate(0)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
// 下一個月 传入当前年份和月份
pickNext (year, month) {
const d = new Date(this.formatDate(year, month, 1))
d.setDate(35)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
// 当前选择日期
pick (date) {
alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
}
}
}
</script>
<style lang="scss">
.date {
height: 180px;
color: black;
.ivu-icon {
cursor:pointer;
}
.month {
font-size: 28px;
text-align: center;
margin-top: 20px;
background: white;
}
.week {
font-size: 28px;
line-height: 50px;
background: #c0c4cc;
text-align: center;
color: #333;
margin-right: -2px;
}
.float-div {
width: 14.28%;
height: 50px;
float: left;
}
.days-border {
border: 2px solid #c0c4d6;
height: 140px;
margin-right: -2px;
}
.days {
display: flex;
div {
flex: 1;
font-size: 30px;
text-align: left;
margin-top: 0px;
line-height: 60px;
.active {
display: inline-block;
width: 60px;
height: 60px;
color: #fff;
border-radius: 50%;
background-color: #fa6854;
text-align: center;
}
.other-month {
color: #e4393c;
}
}
}
.demo-badge {
text-align: center;
line-height: 120px;
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)