之前自己寫了一個vue的日歷demo,那時直接引入cdn的vue.js完成的，功能簡單，樣式簡單，代碼還寫得亂起八糟，所有現(xiàn)在用vue-cli搭建一個vue項目來重新開發(fā)一次，vue--cli搭建vue開發(fā)環(huán)境可參考http://www.itdecent.cn/p/3d44f8269b47
1，新建日歷組件
引入reset.css，在assets里新建styles文件夾，將reset.css文件放在styles目錄下。
在main.js文件里添加：import './assets/styles/reset.css'
記得刪除app.vue里的logo
然后新建calender.vue。在router文件夾下的index.js改寫路由
import Vue from 'vue'
import Router from 'vue-router'
import calender from '@/components/calender'
Vue.use(Router)
export default new Router({
? routes: [
? ? {
? ? ? path: '/',
? ? ? name: 'calender',
? ? ? component: calender
? ? }
? ]
})
calender.vue
<template>
? <div class="calender">
? <h5>開始開發(fā)</h5>
? </div>
</template>
<script>
export default {
? name: 'calender',
? data () {
? ? return {
? ? }
? }
}
</script>
<style scoped>
</style>
然后在：http://localhost:8081，下就可以看到項目效果
2，實現(xiàn)日歷組件的樣式
仿照其他日歷組件的樣式：
我自己寫的樣式附代碼
<template>
? <div class="calender">
? ? <div class="top">
? ? ? <div class="top_date">
? ? ? ? 2019年7月
? ? ? </div>
? ? ? <div class="btn_wrap">
? ? ? ? <ul>
? ? ? ? ? <li>
? ? ? ? ? ? 下個月
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 今天
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 上個月
? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? </div>
? ? </div>
? ? <div class="date_wrap">
? ? ? <ul class="week">
? ? ? ? ? <li>
? ? ? ? ? ? 一
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 二
? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? 三
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 四
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 五
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 六
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 日
? ? ? ? ? </li>
? ? ? </ul>
? ? ? <ul class="day">
? ? ? ? <li v-for="item in 42" :key=item>
? ? ? ? ? {{item}}
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? </div>
</template>
<script>
export default {
? name: 'calender',
? data () {
? ? return {
? ? }
? }
}
</script>
<style scoped>
.calender{
? width: 600px;
? position: relative;
? margin: 0 auto;
? margin-top: 50px;
? border: 1px solid #ddd;
? padding: 20px;
}
.top{
? width: 100%;
? position: relative;
? display: flex;
? border-bottom: 1px solid #ddd;
? padding-bottom: 20px;
}
.top_date{
? width: 100px;
? text-align: left;
? line-height: 42px;
}
.btn_wrap{
? flex: 1;
? text-align: right
}
.btn_wrap ul{
? display: flex;
? flex-direction: row-reverse
}
.btn_wrap ul li{
? padding: 10px 20px;
? border: 1px solid #ddd;
? font-size: 14px;
? line-height: 20px;
? cursor: pointer
}
.btn_wrap ul li:first-child{
? border-left: none;
}
.btn_wrap ul li:last-child{
? border-right: none;
}
.date_wrap{
? position: relative;
}
.week{
? display: flex;
? flex-direction: row;
? padding: 20px;
? font-size: 16px;
}
.week li{
? width: 14.28%;
}
.day{
? display: flex;
? flex-direction: row;
? padding: 20px;
? font-size: 16px;
? flex-wrap: wrap;
}
.day li{
? width: 14.28%;
? padding: 20px;
? box-sizing: border-box;
? border: 1px solid #ddd
}
.day li:nth-child(n+8){
? border-top:none;
}
.day li:nth-child(n+1){
? border-right: none;
}
.day li:nth-child(7n){
? border-right: 1px solid #ddd
}
</style>
3，邏輯和功能實現(xiàn)
得到當前date，獲取年份，月份，日期，周幾，控制選擇日期，代碼說明看注釋
<template>
? <div class="calender">
? ? <div class="top">
? ? ? <div class="top_date">
? ? ? ? {{year}}年{{month}}月
? ? ? </div>
? ? ? <div class="btn_wrap">
? ? ? ? <ul>
? ? ? ? ? <li @click="handleShowNextMonth">
? ? ? ? ? ? 下個月
? ? ? ? ? </li>
? ? ? ? ? <li @click="handleShowToday">
? ? ? ? ? ? 今天
? ? ? ? ? </li>
? ? ? ? ? <li @click="handleShowLastMonth">
? ? ? ? ? ? 上個月
? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? </div>
? ? </div>
? ? <div class="date_wrap">
? ? ? <ul class="week">
? ? ? ? ? <li>
? ? ? ? ? ? 日
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 一
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 二
? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? 三
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 四
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 五
? ? ? ? ? </li>
? ? ? ? ? <li>
? ? ? ? ? ? 六
? ? ? ? ? </li>
? ? ? </ul>
? ? ? <ul class="day">
? ? ? ? <li v-for="(item,index) in days" :key=index>
? ? ? ? ? {{item}}
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? </div>
</template>
<script>
export default {
? name: 'calender',
? data () {
? ? return {
? ? year:'',
? ? month:'',
? ? days:[]
? ? }
? },
? methods:{
? ? //得到當前年這個月分有多少天
? ? getDays(Y,M){
? ? ? let day = new Date(Y, M, 0).getDate()
? ? ? return day;
? ? },
? ? //得到當前年，這個月的一號是周幾
? ? getWeek(Y,M){
? ? ? ? let now = new Date()
? ? ? ? now.setFullYear(this.year)
? ? ? ? now.setMonth(this.month-1)
? ? ? ? now.setDate(1);
? ? ? ? let week = now.getDay();
? ? ? ? return week;
? ? },
? ? pushDays(){
? ? ? ? ? ? //將這個月多少天加入數(shù)組days
? ? ? ? ? ? for(let i = 1; i<=this.getDays(this.year,this.month);i++){
? ? ? ? ? ? ? this.days.push(i)
? ? ? ? ? ? }
? ? ? ? ? ? //將下個月要顯示的天數(shù)加入days
? ? ? ? ? ? for(let i = 1;i<=42-this.getDays(this.year,this.month)-this.getWeek(this.year,this.month);i++){
? ? ? ? ? ? ? this.days.push(i)
? ? ? ? ? ? }
? ? ? ? ? ? //將上個月要顯示的天數(shù)加入days
? ? ? ? ? ? for(let i=0;i<this.getWeek(this.year,this.month);i++){
? ? ? ? ? ? ? var lastMonthDays=this.getDays(this.year,this.month-1)
? ? ? ? ? ? ? ? this.days.unshift(lastMonthDays-i)
? ? ? ? ? ? }s
? ? ? ? ? ? console.log(this.days)
? ? ? ? ? ? console.log(this.getWeek(this.year,this.month))
? ? },
? ? getDate(){
? ? ? ? ? ? let now = new Date();
? ? ? ? ? ? this.year = now.getFullYear();
? ? ? ? ? ? this.month = now.getMonth()+1;
? ? ? ? ? ? this.pushDays();
? ? },
? ? changeDate(){
? ? },
? ? handleShowNextMonth(){
? ? ? this.days=[];
? ? ? if(this.month<12){
? ? ? ? this.month=this.month+1;
? ? ? ? this.pushDays();
? ? ? }else{
? ? ? ? this.month= this.month=1;
? ? ? ? this.year=this.year+1;
? ? ? ? this.pushDays();
? ? ? }
? ? },
? ? handleShowToday(){
? ? ? this.days=[];
? ? ? let now = new Date();
? ? ? this.year=now.getFullYear();
? ? ? this.month=now.getMonth()+1;
? ? ? this.pushDays();
? ? },
? ? handleShowLastMonth(){
? ? ? this.days=[];
? ? ? if(this.month>1){
? ? ? ? this.month=this.month-1;
? ? ? this.pushDays();
? ? ? }else if( this.year>1970){
? ? ? ? this.month=12;
? ? ? ? this.year=this.year-1;
? ? ? ? this.pushDays();
? ? ? }else{
? ? ? ? alert("不能查找更遠的日期")
? ? ? }
? ? }
? },
? mounted(){
? ? this.getDate();
? }
}
</script>
<style scoped>
.calender{
? width: 600px;
? position: relative;
? margin: 0 auto;
? margin-top: 50px;
? border: 1px solid #ddd;
? padding: 20px;
}
.top{
? width: 100%;
? position: relative;
? display: flex;
? border-bottom: 1px solid #ddd;
? padding-bottom: 20px;
}
.top_date{
? width: 100px;
? text-align: left;
? line-height: 42px;
}
.btn_wrap{
? flex: 1;
? text-align: right
}
.btn_wrap ul{
? display: flex;
? flex-direction: row-reverse
}
.btn_wrap ul li{
? padding: 10px 20px;
? border: 1px solid #ddd;
? font-size: 14px;
? line-height: 20px;
? cursor: pointer
}
.btn_wrap ul li:first-child{
? border-left: none;
}
.btn_wrap ul li:last-child{
? border-right: none;
}
.date_wrap{
? position: relative;
}
.week{
? display: flex;
? flex-direction: row;
? padding: 20px;
? font-size: 16px;
}
.week li{
? width: 14.28%;
}
.day{
? display: flex;
? flex-direction: row;
? padding: 20px;
? font-size: 16px;
? flex-wrap: wrap;
}
.day li{
? width: 14.28%;
? padding: 20px;
? box-sizing: border-box;
? border: 1px solid #ddd
}
.day li:nth-child(n+8){
? border-top:none;
}
.day li:nth-child(n+1){
? border-right: none;
}
.day li:nth-child(7n){
? border-right: 1px solid #ddd
}
</style>
4，至此，一個日歷組件基本完成，最后給當前日期加一個特殊樣式
通過? :class="{now:nowLi==year.toString()+month.toString()+item}" 來判斷是否是當前日期
nowLi是在methods方法中加以下方法實現(xiàn)，在mounted方法中就要使用該法方法。
//控制當前日期顯示特殊樣式
? ? handleShowDateStyle(){
? ? ? let now = new Date()
? ? ? this.nowLi=now.getFullYear().toString()+(now.getMonth()+1).toString()+now.getDate().toString()
? ? ? console.log(this.nowLi)
? ? },
然后給now加css:
.now{
? background: #f2f8fe;
? color:#1989fa;
}
最后的日歷組件完成了：
