vue農曆日曆
<template>
<div class="calendar-main">
<div class="choose_year">
<div class="icon" @click="chooseYears(-1)"><i class="el-icon-d-arrow-left"></i></div>
<div class="icon" @click="chooseMonth(-1)"><i class="el-icon-arrow-left"></i></div>
<div class="date">{{year}}年{{month.toString().padStart(2, '0')}}月</div>
<div class="icon" @click="chooseMonth(1)"><i class="el-icon-arrow-right"></i></div>
<div class="icon" @click="chooseYears(1)"><i class="el-icon-d-arrow-right"></i></div>
</div>
<div class="lunar-detail-date">
{{lunarDetail.lunarYear.substring(0,2)}} -【{{lunarDetail.lunarYear.substring(2,3)}}】年{{lunarDetail.lunarMonth}}月{{lunarDetail.lunarDay}}
</div>
<div class="days_area">
<div class="day week" v-for="week in weeks" :key="week">{{week}}</div>
<div class="day day-list" @click="chooseThisDay(day.gregorian)" v-for="(day, index) in days" :key="index" :class="day.gregorian === today ? 'choose_day' : ''">
<p>{{day.gregorian}}</p>
<span>{{day.lunar}}</span>
</div>
</div>
<div class="bottom-btn">
<span @click="close">取消</span>
<span @click="confirm">肯定</span>
</div>
</div>
</template>
<script>
import {sloarToLunar,getYearMonthDay} from "Scripts/computedLunarDate.js"
export default {
name: 'LunarCalendar',
props:['currentDate'],
data () {
return {
year: 0,
month: 0,
today: 0,
days: [],
weeks: ['一', '二', '三', '四', '五', '六', '日'],
todayDate:0
}
},
mounted () {
this.todayDate = new Date().getDate();
if(this.currentDate){
const now = new Date(this.currentDate);
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.today = now.getDate();
}else{
const now = new Date();
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.today = now.getDate();
}
this.getDays()
},
computed:{
selectDate(){
return `${this.year}-${this.month.toString().padStart(2, '0')}-${this.today}`
},
lunarDetail(){
return sloarToLunar(this.year,this.month.toString().padStart(2, '0'),this.today);
}
},
methods: {
// 獲取當前月份全部公曆日期及其農曆日期
getDays () {
this.days = [];
const time = new Date();
time.setFullYear(this.year, this.month, 0);
for (let i = 0; i < time.getDay(); i++) {
this.days.push({gregorian: '', lunar: ''})
}
for (let i = 1; i <= time.getDate(); i++) {
this.days.push({gregorian: i, lunar: getYearMonthDay(this.year, this.month, i)})
}
},
// 改變年份
chooseYears (state) {
this.year += state;
if(new Date().getFullYear()===this.year&&(new Date().getMonth()+1)===this.month){
this.today = this.todayDate;
}else{
this.today = 0;
}
this.getDays()
},
// 改變月份
chooseMonth (state) {
this.month += state;
if(new Date().getFullYear()===this.year&&(new Date().getMonth()+1)===this.month){
this.today = this.todayDate;
}else{
this.today = 0;
}
if (this.month < 1) {
this.month = 12;
this.chooseYears(-1)
} else if (this.month > 12) {
this.month = 1;
this.chooseYears(1)
} else {
this.getDays()
}
},
chooseThisDay (day) {
if (day > 0) {
this.today = day;
}
},
getBit (m, n) {
return 29 + ((m >> n) & 1)
},
close(){
this.$emit('close')
},
confirm(){
this.$emit('getLunarDate',this.selectDate)
}
}
}
</script>
<style lang="less" scoped>
.calendar-main{
width: 325px;
position: absolute;
left:0;
right: 0;
z-index: 99;
margin-top: 5px;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
.choose_year{
display: flex;
.icon{
width: 10%;
height: 35px;
line-height: 35px;
text-align: center;
cursor: pointer;
&:hover{
color: dodgerblue;
}
}
.date{
width: 60%;
text-align: center;
height: 35px;
line-height: 35px;
font-size: 14px;
}
}
.lunar-detail-date{
line-height: 15px;
text-align: center;
color: #FF6800;
}
.days_area{
display: flex;
flex-wrap: wrap;
.day{
width: 14.28%;
line-height: 27px;
text-align: center;
cursor: pointer;
p{
margin: 0;
font-size: 12px;
line-height: 20px;
}
span{
font-size: 12px;
}
}
.day-list{
&:hover{
background-color: #87bdf3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
}
.week{
background-color: #fff;
color: #19233c;
font-weight: bold;
height: 40px;
line-height: 40px;
margin: 0;
}
.choose_day{
background-color: dodgerblue;
color: #fff;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
span{
color: #fff;
}
p{
color: #fff;
}
}
}
.bottom-btn{
text-align: right;
span{
padding: 4px 8px;
margin-right: 5px;
cursor: pointer;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
&:hover{
color: dodgerblue;
border: 1px solid dodgerblue;
}
}
}
}
</style>
let lunarYearArr = [ 0x0b557, //1949 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-1959 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-1969 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-1979 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-1989 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-1999 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-2009 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-2019 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-2029 0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-2039 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-2049 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-2059 0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-2069 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-2079 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-2089 0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-2099 0x0d520 //2100 ], lunarMonth = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '臘'], lunarDay = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '初', '廿'], tianGan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'], diZhi = ['子鼠', '丑牛', '寅虎', '卯兔', '辰龍', '巳蛇', '午馬', '未羊', '申猴', '酉雞', '戌狗', '亥豬'];// 公曆轉農曆函數export const sloarToLunar = function (sy, sm, sd) { // 輸入的月份減1處理 sm -= 1; // 計算與公曆基準的相差天數 // Date.UTC()返回的是距離公曆1970年1月1日的毫秒數,傳入的月份須要減1 let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1; let ly, lm, ld,lz; // 肯定輸出的農曆年份 for (let j = 0; j < lunarYearArr.length; j++) { daySpan -= lunarYearDays(lunarYearArr[j]); if (daySpan <= 0) { ly = 1949 + j; // 獲取農曆年份肯定後的剩餘天數 daySpan += lunarYearDays(lunarYearArr[j]); break } } // 肯定輸出的農曆月份 for (let k = 0; k < lunarYearMonths(lunarYearArr[ly - 1949]).length; k++) { daySpan -= lunarYearMonths(lunarYearArr[ly - 1949])[k]; if (daySpan <= 0) { // 有閏月時，月份的數組長度會變成13，所以，當閏月月份小於等於k時，lm不須要加1 if (hasLeapMonth(lunarYearArr[ly - 1949]) && hasLeapMonth(lunarYearArr[ly - 1949]) <= k) { if (hasLeapMonth(lunarYearArr[ly - 1949]) < k) { lm = k; } else if (hasLeapMonth(lunarYearArr[ly - 1949]) === k) { lm = '閏' + k; } else { lm = k + 1; } } else { lm = k + 1; } // 獲取農曆月份肯定後的剩餘天數 daySpan += lunarYearMonths(lunarYearArr[ly - 1949])[k]; break } } // 肯定輸出農曆哪一天 ld = daySpan; // 將計算出來的農曆月份轉換成漢字月份，閏月須要在前面加上閏字 if (hasLeapMonth(lunarYearArr[ly - 1949]) && (typeof (lm) === 'string' && lm.indexOf('閏') > -1)) { lm = `閏${lunarMonth[/\d/.exec(lm) - 1]}` } else { lm = lunarMonth[lm - 1]; } // 將計算出來的農曆年份轉換爲天干地支年 ly = getTianGan(ly) + getDiZhi(ly); // 將計算出來的農曆天數轉換成漢字 if (ld < 11) { ld = `${lunarDay[10]}${lunarDay[ld-1]}` } else if (ld > 10 && ld < 20) { ld = `${lunarDay[9]}${lunarDay[ld-11]}` } else if (ld === 20) { ld = `${lunarDay[1]}${lunarDay[9]}` } else if (ld > 20 && ld < 30) { ld = `${lunarDay[11]}${lunarDay[ld-21]}` } else if (ld === 30) { ld = `${lunarDay[2]}${lunarDay[9]}` } return { lunarYear: ly, lunarMonth: lm, lunarDay: ld, lunarShengXiao:lz }};export const getYearMonthDay = function (sy, sm, sd) { // 輸入的月份減1處理 sm -= 1; // 計算與公曆基準的相差天數 // Date.UTC()返回的是距離公曆1970年1月1日的毫秒數,傳入的月份須要減1 let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1; let ly, lm, ld,lz; // 肯定輸出的農曆年份 for (let j = 0; j < lunarYearArr.length; j++) { daySpan -= lunarYearDays(lunarYearArr[j]); if (daySpan <= 0) { ly = 1949 + j; // 獲取農曆年份肯定後的剩餘天數 daySpan += lunarYearDays(lunarYearArr[j]); break } } // 肯定輸出的農曆月份 for (let k = 0; k < lunarYearMonths(lunarYearArr[ly - 1949]).length; k++) { daySpan -= lunarYearMonths(lunarYearArr[ly - 1949])[k]; if (daySpan <= 0) { // 有閏月時，月份的數組長度會變成13，所以，當閏月月份小於等於k時，lm不須要加1 if (hasLeapMonth(lunarYearArr[ly - 1949]) && hasLeapMonth(lunarYearArr[ly - 1949]) <= k) { if (hasLeapMonth(lunarYearArr[ly - 1949]) < k) { lm = k; } else if (hasLeapMonth(lunarYearArr[ly - 1949]) === k) { lm = '閏' + k; } else { lm = k + 1; } } else { lm = k + 1; } // 獲取農曆月份肯定後的剩餘天數 daySpan += lunarYearMonths(lunarYearArr[ly - 1949])[k]; break } } // 肯定輸出農曆哪一天 ld = daySpan; // 將計算出來的農曆月份轉換成漢字月份，閏月須要在前面加上閏字 if (hasLeapMonth(lunarYearArr[ly - 1949]) && (typeof (lm) === 'string' && lm.indexOf('閏') > -1)) { lm = `閏${lunarMonth[/\d/.exec(lm) - 1]}` } else { lm = lunarMonth[lm - 1]; } // 將計算出來的農曆年份轉換爲天干地支年 ly = getTianGan(ly) + getDiZhi(ly); // 將計算出來的農曆天數轉換成漢字 if (ld < 11) { ld = `${lunarDay[10]}${lunarDay[ld-1]}` } else if (ld > 10 && ld < 20) { ld = `${lunarDay[9]}${lunarDay[ld-11]}` } else if (ld === 20) { ld = `${lunarDay[1]}${lunarDay[9]}` } else if (ld > 20 && ld < 30) { ld = `${lunarDay[11]}${lunarDay[ld-21]}` } else if (ld === 30) { ld = `${lunarDay[2]}${lunarDay[9]}` } return ld;};// 計算農曆年是否有閏月，參數爲存儲農曆年的16進制// 農曆年份信息用16進制存儲，其中16進制的最後1位能夠用於判斷是否有閏月function hasLeapMonth(ly) { // 獲取16進制的最後1位，須要用到&與運算符 if (ly & 0xf) { return ly & 0xf } else { return false }}// 若是有閏月，計算農曆閏月天數，參數爲存儲農曆年的16進制// 農曆年份信息用16進制存儲，其中16進制的第1位（0x除外）能夠用於表示閏月是大月仍是小月function leapMonthDays(ly) { if (hasLeapMonth(ly)) { // 獲取16進制的第1位（0x除外） return (ly & 0xf0000) ? 30 : 29 } else { return 0 }}// 計算農曆一年的總天數，參數爲存儲農曆年的16進制// 農曆年份信息用16進制存儲，其中16進制的第2-4位（0x除外）能夠用於表示正常月是大月仍是小月function lunarYearDays(ly) { let totalDays = 0; // 獲取正常月的天數，並累加 // 獲取16進制的第2-4位，須要用到>>移位運算符 for (let i = 0x8000; i > 0x8; i >>= 1) { let monthDays = (ly & i) ? 30 : 29; totalDays += monthDays; } // 若是有閏月，須要把閏月的天數加上 if (hasLeapMonth(ly)) { totalDays += leapMonthDays(ly); } return totalDays}// 獲取農曆每一個月的天數// 參數需傳入16進制數值function lunarYearMonths(ly) { let monthArr = []; // 獲取正常月的天數，並添加到monthArr數組中 // 獲取16進制的第2-4位，須要用到>>移位運算符 for (let i = 0x8000; i > 0x8; i >>= 1) { monthArr.push((ly & i) ? 30 : 29); } // 若是有閏月，須要把閏月的天數加上 if (hasLeapMonth(ly)) { monthArr.splice(hasLeapMonth(ly), 0, leapMonthDays(ly)); } return monthArr;}// 將農曆年轉換爲天干，參數爲農曆年function getTianGan(ly) { let tianGanKey = (ly - 3) % 10; if (tianGanKey === 0) tianGanKey = 10; return tianGan[tianGanKey - 1];}// 將農曆年轉換爲地支，參數爲農曆年function getDiZhi(ly) { let diZhiKey = (ly - 3) % 12; if (diZhiKey === 0) diZhiKey = 12; return diZhi[diZhiKey - 1];}
相關文章
- 1. 日曆的公曆轉農曆
- 2. vue之實現日曆----顯示農曆，滾動日曆監聽年月改變
- 3. Hexo Landscape博客添加【農曆日曆】
- 4. Vue日曆
- 5. vue 週日歷
- 6. C#下的一個好用的日曆庫(sxtwl_cpp)，支持農曆轉公曆，和公曆轉農曆等功能
- 7. Vue實現日曆
- 8. vue-event-calendar 日曆
- 9. vue 設計日曆
- 10. vue 日曆組件
- 更多相關文章...
- • RSS 歷史 - RSS 教程
- • Git 查看提交歷史 - Git 教程
- • C# 中 foreach 遍歷的用法
- • 算法總結-深度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 日曆的公曆轉農曆
- 2. vue之實現日曆----顯示農曆，滾動日曆監聽年月改變
- 3. Hexo Landscape博客添加【農曆日曆】
- 4. Vue日曆
- 5. vue 週日歷
- 6. C#下的一個好用的日曆庫(sxtwl_cpp)，支持農曆轉公曆，和公曆轉農曆等功能
- 7. Vue實現日曆
- 8. vue-event-calendar 日曆
- 9. vue 設計日曆
- 10. vue 日曆組件