一、日歷組件

new Date()的月份是從0開始的。

下面表達式是：2018年6月1日new Date(2018, 5, 1);下面表達式是：2018年5月1日new Date(2018, 4, 1);或new Date(2018, 5-1, 1);下面表達式是：2018年5月31日（得到上個月的最后一天）new Date(2018, 5 , 0);日的參數可以是0，也可以是負數，表示上個月底的那一天。下面表達式是：2018年7月01日new Date(2018, 5, 31);

lApp.vue父組件：

<template> <div> <MonthView :year="year" :month="month"></MonthView> </div></template><script> import MonthView from "./components/MonthView.vue"; export default { data(){ return { year : 2018 , month : 8 , } }, components : { MonthView }, methods : { } }</script>

lMonthView.vue子組件

<template><div> 月視圖{{year}} {{month}} {{arr}} </div></template><script> export default { props : ["year" , "month"], computed : { arr(){ //計算日歷的數組：三要素 //本月1號星期幾 var this1DayWeek = new Date(this.year, this.month - 1, 1).getDay(); // 本月有幾天 var thisMonthDay = new Date(this.year, this.month, 0).getDate(); // 上月有多少天 var prevMonthDay = new Date(this.year, this.month - 1, 0).getDate(); console.log(benyue1haoxingqiji) console.log(benyueyoujitian) console.log(shangyueduoshaotian) } } }</script>

l顯示在頁面：

<template> <div> <table> <tr v-for="i in 6"> <td v-for="j in arr.slice((i-1) * 7, i * 7)">  {{j}} </td> </tr> </table> </div></template><script> export default { props:["year","month"], computed : { arr(){ var _arr = []; //存儲42天的數組 // 計算日歷的數組：三要素 //本月1號星期幾，根據星期幾得到上個月剩余天數 var this1DayWeek = new Date(this.year, this.month-1, 1).getDay(); //上個月有多少天 var prevMonthDay = new Date(this.year, this.month-1, 0).getDate(); //本月有幾天 var thisMonthDay = new Date(this.year, this.month, 0).getDate(); //用本月1號星期幾，推斷出上月的剩余天數 for(var i = 0; i < this1DayWeek;i++){  _arr.unshift(prevMonthDay - i) }  //循環本月天數（累加），從數組末尾插入 for(var i = 1; i <= thisMonthDay;i++){  _arr.push(i) } //補充下月的天數（滿42天為止） var i = 1; while(_arr.length != 42){  _arr.push(i++); }  return _arr; } } }</script>

l顯示農歷，安裝插件：

npm install solarlunar --save

<template> <div> <h1>月視圖 {{year}}年{{month}}月</h1> <table> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> <tr v-for="i in 6"> <td v-for="j in arr.slice((i-1) * 7, i * 7)">  <p class="p1">{{j.d}}</p>  <p class="p2">{{j.n}}</p> </td> </tr> </table> </div></template><script> import solarLunar from 'solarLunar'; export default { props:["year","month"], computed : { arr(){ var _arr = []; //存儲42天的數組 // 計算日歷的數組：三要素 //本月1號星期幾，根據星期幾得到上個月剩余天數 var this1DayWeek = new Date(this.year, this.month-1, 1).getDay(); //上個月有多少天 var prevMonthDay = new Date(this.year, this.month-1, 0).getDate(); //本月有幾天 var thisMonthDay = new Date(this.year, this.month, 0).getDate(); //用本月1號星期幾，推斷出上月的剩余天數 for(var i = 0; i < this1DayWeek;i++){  _arr.unshift({  d: prevMonthDay - i,  n: solarLunar.solar2lunar(this.year, this.month-1, prevMonthDay - i).dayCn  }) }  //循環本月天數，累加，從數組末尾插入 for(var i = 1; i <= thisMonthDay;i++){  _arr.push({  d: i,  n: solarLunar.solar2lunar(this.year, this.month, i).dayCn  }) } //補充下個月的天數（滿42天為止） var i = 1; while(_arr.length != 42){  _arr.push({  d : i,  n : solarLunar.solar2lunar(this.year, this.month+1, i).dayCn  });  i++; } console.log(_arr) return _arr; } } }</script>