vue实现农历日期选择器

在项目中会员进行注册的时候需要进行生日的选择，由于通用的UI库都是公历的并且万年历的形式不符合。也在网上查了好多资料，最后找到一套算法感觉还是不错的。经过加工分析封装成了一个vue组件。

实现公农历转换的算法

/*** 数组LunarDaysOfMonth存入农历1901年到2050年每年中的月天数信息* 农历每月只能是29或30天，一年用12(或13)个二进制位表示，从高到低，对应位为1表示30天，否则29天*/var LunarDaysOfMonth = new Array(0x4ae0, 0xa570, 0x5268, 0xd260, 0xd950, 0x6aa8, 0x56a0, 0x9ad0, 0x4ae8, 0x4ae0,   // 1901-1910   0xa4d8, 0xa4d0, 0xd250, 0xd548, 0xb550, 0x56a0, 0x96d0, 0x95b0, 0x49b8, 0x49b0,   // 1920   0xa4b0, 0xb258, 0x6a50, 0x6d40, 0xada8, 0x2b60, 0x9570, 0x4978, 0x4970, 0x64b0,   // 1930   0xd4a0, 0xea50, 0x6d48, 0x5ad0, 0x2b60, 0x9370, 0x92e0, 0xc968, 0xc950, 0xd4a0,   // 1940   0xda50, 0xb550, 0x56a0, 0xaad8, 0x25d0, 0x92d0, 0xc958, 0xa950, 0xb4a8, 0x6ca0,   // 1950   0xb550, 0x55a8, 0x4da0, 0xa5b0, 0x52b8, 0x52b0, 0xa950, 0xe950, 0x6aa0, 0xad50,   // 1960   0xab50, 0x4b60, 0xa570, 0xa570, 0x5260, 0xe930, 0xd950, 0x5aa8, 0x56a0, 0x96d0,   // 1970   0x4ae8, 0x4ad0, 0xa4d0, 0xd268, 0xd250, 0xd528, 0xb540, 0xb6a0, 0x96d0, 0x95b0,   // 1980   0x49b0, 0xa4b8, 0xa4b0, 0xb258, 0x6a50, 0x6d40, 0xada0, 0xab60, 0x9370, 0x4978,   // 1990   0x4970, 0x64b0, 0x6a50, 0xea50, 0x6b28, 0x5ac0, 0xab60, 0x9368, 0x92e0, 0xc960,   // 2000 0xd4a8, 0xd4a0, 0xda50, 0x5aa8, 0x56a0, 0xaad8, 0x25d0, 0x92d0, 0xc958, 0xa950,   // 2001-2010 0xb4a0, 0xb550, 0xb550, 0x55a8, 0x4ba0, 0xa5b0, 0x52b8, 0x52b0, 0xa930, 0x74a8,   // 2011-2020 0x6aa0, 0xad50, 0x4da8, 0x4b60, 0x9570, 0xa4e0, 0xd260, 0xe930, 0xd530, 0x5aa0,     // 2021-2030 0x6b50, 0x96d0, 0x4ae8, 0x4ad0, 0xa4d0, 0xd258, 0xd250, 0xd520, 0xdaa0, 0xb5a0,    // 2031-2040 0x56d0, 0x4ad8, 0x49b0, 0xa4b8, 0xa4b0, 0xaa50, 0xb528, 0x6d20, 0xada0, 0x55b0     // 2041-2050 );
/**
*   数组LunarLeapYear存放农历1901年到2050年闰月的月份，如没有则为0，从高到低，每字节存两年
*/
var LunarLeapYear = new Array(0x00, 0x50, 0x04, 0x00, 0x20,   // 1901-1910   0x60, 0x05, 0x00, 0x20, 0x70,   // 1920   0x05, 0x00, 0x40, 0x02, 0x06,   // 1930   0x00, 0x50, 0x03, 0x07, 0x00,   // 1940   0x60, 0x04, 0x00, 0x20, 0x70,   // 1950   0x05, 0x00, 0x30, 0x80, 0x06,   // 1960   0x00, 0x40, 0x03, 0x07, 0x00,   // 1970   0x50, 0x04, 0x08, 0x00, 0x60,   // 1980   0x04, 0x0a, 0x00, 0x60, 0x05,   // 1990   0x00, 0x30, 0x80, 0x05, 0x00,   // 20000x40, 0x02, 0x07, 0x00, 0x50,  // 2001-2010 0x04, 0x09, 0x00, 0x60, 0x04,  // 2011-2020 0x00, 0x20, 0x60, 0x05, 0x00,  // 2021-2030 0x30, 0xb0, 0x06, 0x00, 0x50,  // 2031-2040 0x02, 0x07, 0x00, 0x50, 0x03   // 2041-2050 );/**
* 日期转换
* 使用方法
* var dc = new dateChange();
* var a=dc.getSolarDate([2005,1,10]);  //农历转公历
* var b=dc.getLunarDate([2005,1,10]); //公历转农历
*/
// function dateChange() {/*** 返回农历iLunarYear年的闰月月份，如没有则返回0 */function GetLeapMonth(iLunarYear) {var Leap = LunarLeapYear[(iLunarYear - 1901) >> 1];return (((iLunarYear - 1901) & 1) == 0) ? (Leap >> 4) : (Leap & 0x0f);}/*** 返回农历iLunarYer年iLunarMonth月的天数，结果是一个长整数* 如果iLunarMonth不是闰月， 高字为0，低字为该月的天数* 如果iLunarMonth是闰月， 高字为后一个月的天数，低字为前一个月的天数*/function LunarMonthDays(iLunarYear, iLunarMonth) {var High;var Low;var Bit;High = 0;Low = 29;Bit = 16 - iLunarMonth;if ((iLunarMonth > GetLeapMonth(iLunarYear)) && (GetLeapMonth(iLunarYear) > 0)) Bit--;if ((LunarDaysOfMonth[iLunarYear - 1901] & (1 << Bit)) > 0) Low++;if (iLunarMonth == GetLeapMonth(iLunarYear)) {High = ((LunarDaysOfMonth[iLunarYear - 1901] & (1 << (Bit - 1))) > 0) ? 30 : 29;}return Low + (High << 16);}/*** 返回公历iSolarYear年iSolarMonth月的天数，结果是一个长整数*/function SolarMonthDays(iSolarYear, iSolarMonth) {var MonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];var isl = isLeapYear(iSolarYear);if (isl) MonthDays[1] = 29;return MonthDays[iSolarMonth - 1];}/*** 返回农历iLunarYear年的总天数*/function LunarYearDays(iLunarYear) {var Days;var tmp;Days = 0;for (var i = 1; i <= 12; i++) {tmp = LunarMonthDays(iLunarYear, i);Days = Days + ((tmp >> 16) & 0xffff); //取高位 Days = Days + (tmp & 0xffff); //取低位 }return Days;}/*** 返回公历iSolarYear年的总天数*/function SolarYearDays(iSolarYear) {var isl = isLeapYear(iSolarYear);return isl ? 366 : 365;}/*** 判断公历年是否是润年*/function isLeapYear(iSolarYear) {var y = parseInt(iSolarYear);return ((y % 100 == 0 && y % 400 == 0) || (y % 4 == 0 & y % 100 != 0));}/*** 将农历iLunarYear年格式化成天干地支记年法表示的字符串 */function FormatLunarYear(iLunarYear) {var szText1 = new String("甲乙丙丁戊己庚辛壬癸");var szText2 = new String("子丑寅卯辰巳午未申酉戌亥");var strYear;strYear = szText1.substr((iLunarYear - 4) % 10, 1);strYear = strYear + szText2.substr((iLunarYear - 4) % 12, 1);return strYear + "年";}/*** 将农历iLunarMonth月格式化成农历表示的字符串*/function FormatLunarMonth(iLunarMonth) {var szText = new String("正二三四五六七八九十");var strMonth;if (iLunarMonth <= 10) {strMonth = szText.substr(iLunarMonth - 1, 1);}else if (iLunarMonth == 11) strMonth = "冬";else strMonth = "腊";return strMonth + "月";}/*** 将农历iLunarDay日格式化成农历表示的字符串*/function FormatLunarDay(iLunarDay) {var szText1 = new String("初十廿三");var szText2 = new String("一二三四五六七八九十");var strDay;if ((iLunarDay != 20) && (iLunarDay != 30)) {strDay = szText1.substr((iLunarDay - 1) / 10, 1) + szText2.substr((iLunarDay - 1) % 10, 1);}else if (iLunarDay != 20) {strDay = szText1.substr(iLunarDay / 10, 1) + "十";}else {strDay = "二十";}return strDay;}/*** 计算两个公历日期相差的天数*/function CaculateSolarSpanDays(start, end) {var starty = start[0];var startm = start[1];var startd = start[2];var endy = end[0];var endm = end[1];var endd = end[2];var daynum = 0;//年份的天数for (var i = starty; i < endy; i++) {daynum += SolarYearDays(i);}//月份的天数for (var i = 1; i < endm; i++) {daynum += SolarMonthDays(endy, i);}daynum += endd - startd;return daynum;}/*** 计算两个农历日期相差的天数* isleap--> end的月份是闰月还是非闰月*/function CaculateLunarSpanDays(start, end, isleap) {var starty = start[0];var startm = start[1];var startd = start[2];var endy = end[0];var endm = end[1];var endd = end[2];var daynum = 0;//年份的天数for (var i = starty; i < endy; i++) {daynum += LunarYearDays(i);}//月份的天数for (var i = 1; i < endm; i++) {var mdays = 0;var tmp = LunarMonthDays(endy, i);mdays += ((tmp >> 16) & 0xffff); //取高位 mdays += (tmp & 0xffff); //取低位 daynum += mdays;//w('lunar'+endy+'年'+i+'月的天数为'+ LunarMonthDays(endy,i));}//如果当前月是闰月,加上当前月的非闰月天数if (isleap) {var Low;var Bit;Low = 29;Bit = 16 - endm;if ((endm > GetLeapMonth(endy)) && (GetLeapMonth(endy) > 0)) Bit--;if ((LunarDaysOfMonth[endy - 1901] & (1 << Bit)) > 0) Low++;daynum += Low;}daynum += endd - startd;return daynum;}/*** 将公历日期转换为农历日期，返回农历表示的字符串*/function GetLunarDateString(SolarDate) {var tmp;var iLunarYear;var iLunarMonth;var iLunarDay;var Leap = false;var MinMilli = 1000 * 60;var HrMilli = MinMilli * 60;var DyMilli = HrMilli * 24;/* 从1901年1月1日算起，给定的公历日期已经过去的天数Date是从1970年1月1日作为起点的   */var StartDate = [1901, 1, 1];var iSpanDays = CaculateSolarSpanDays(StartDate, SolarDate);//w('公历'+StartDate+'至'+SolarDate+'的总天数：'+iSpanDays);// 公历1901年2月19日为农历1901年正月初一，差49天if (iSpanDays <= 18) {iLunarYear = 1900;iLunarMonth = 11;iLunarDay = 11 + iSpanDays;}else if (iSpanDays > 18 && iSpanDays < 49) {iLunarYear = 1900;iLunarMonth = 12;iLunarDay = iSpanDays - 18;}else {// 从农历1901年正月初一算起 iSpanDays = iSpanDays - 49;iLunarYear = 1901;iLunarMonth = 1;iLunarDay = 1;// 计算农历年 tmp = LunarYearDays(iLunarYear);while (iSpanDays >= tmp) {iSpanDays -= tmp;iLunarYear++;tmp = LunarYearDays(iLunarYear);//w(iLunarYear + '总天数' + tmp + '  减后剩余天数:' +iSpanDays);}//w('年--'+iLunarYear);// 计算农历月 tmp = LunarMonthDays(iLunarYear, iLunarMonth) & 0xffff; //取低字while (iSpanDays >= tmp) {iSpanDays -= tmp;if (iLunarMonth == GetLeapMonth(iLunarYear))  // 该年该月闰月{tmp = LunarMonthDays(iLunarYear, iLunarMonth) >> 16; //取高字if (iSpanDays < tmp) {Leap = (tmp > 0) ? true : false;  // 闰月的后个月？break;}iSpanDays = iSpanDays - tmp;}iLunarMonth++;tmp = LunarMonthDays(iLunarYear, iLunarMonth) & 0xffff; //取低字}// 计算农历日 iLunarDay += iSpanDays;}return [iLunarYear, (Leap ? iLunarMonth * 10 : iLunarMonth), iLunarDay, FormatLunarYear(iLunarYear) + '(' + iLunarYear + ')', (Leap ? "闰" : "") + FormatLunarMonth(iLunarMonth), FormatLunarDay(iLunarDay), 'fromSolarDay' + SolarDate];//return FormatLunarYear(iLunarYear) + (Leap ? "闰" : "") + FormatLunarMonth(iLunarMonth) + FormatLunarDay(iLunarDay);}/*** 将农历日期转换为公历日期*/function GetSolarDateString(LunarDate) {var tmp;var iSolarYear;var iSolarMonth;var iSolarDay;var Leap = false;var MinMilli = 1000 * 60;var HrMilli = MinMilli * 60;var DyMilli = HrMilli * 24;//判断LunarDate的月份是否属于闰月, 例 4为非闰月 40为闰月.var monthIsLeap = false;if (LunarDate[1] > 12) {monthIsLeap = true;LunarDate[1] = LunarDate[1] / 10;}if (LunarDate[0] < 1900) {alert('超出计算范围0');return false;}// 从1900年冬月十一(公历1901年1月1日)算起，给定的农历日期已经过去的天数    // 公历1901年2月19日为农历1901年正月初一，差49天// 公历1901年1月1日为农历1900年11月11，差49天var StartDate = [1901, 1, 1];if (LunarDate[0] == 1900) {if (LunarDate[1] == 11) {var iSpanDays = LunarDate[2] - 11;} else if (LunarDate[1] == 12) {var iSpanDays = LunarDate[2] + 18;} else {alert('超出计算范围');return false;}} else {var iSpanDays = CaculateLunarSpanDays(StartDate, LunarDate, monthIsLeap) + 49;}//w('1900年冬月十一 至 '+LunarDate+'的总天数:'+iSpanDays);   // 从公历1901年1月1日算起   iSolarYear = 1901;iSolarMonth = 1;iSolarDay = 1;// 计算公历年 tmp = SolarYearDays(iSolarYear);//w(iSolarYear+'年'+'的总天数:'+tmp);while (iSpanDays >= tmp) {iSpanDays -= tmp;iSolarYear++;tmp = SolarYearDays(iSolarYear);//w(iSolarYear+'年'+'的总天数:'+tmp);}//w('计算公历年后剩余天数:'+iSpanDays);// 计算公历月 tmp = SolarMonthDays(iSolarYear, iSolarMonth);//w(iSolarYear+'年'+iSolarMonth+'月'+'的天数:'+tmp);while (iSpanDays >= tmp) {iSpanDays -= tmp;iSolarMonth++;tmp = SolarMonthDays(iSolarYear, iSolarMonth);//w(iSolarYear+'年'+iSolarMonth+'月'+'的天数:'+tmp + ' 减后:'+iSpanDays);}//w('计算月后剩余天数:'+iSpanDays);// 计算公历日 iSolarDay += iSpanDays;return [iSolarYear, iSolarMonth, iSolarDay, iSolarYear + '年', iSolarMonth + '月', iSolarDay + '日', 'fromLunarDays' + LunarDate];}
export  {GetLunarDateString,GetSolarDateString,SolarYearDays,SolarMonthDays,LunarYearDays,LunarMonthDays,GetLeapMonth,FormatLunarMonth,FormatLunarDay,FormatLunarYear}

组件封装

<template><div><div class="btn"><div class="btn_left" @click="err">取消</div><div class="btn_right" @click="send">确定</div></div><div class="select"><div><select name id @change="lunary" ref="lunary" class="select_y" size="5"><option v-for="(item,index) in ylist" :key="index" selected>{{item}}</option></select></div><div><select name id @change="lunarm" ref="lunarm" class="select_m" size="5"><option v-for="(item,index) in mlist" :key="index">{{item}}</option></select></div><div><select name id @change="lunard" ref="lunard" class="select_d" size="5"><option v-for="(item,index) in dlist" :key="index">{{item}}</option></select></div></div></div>
</template>
<script>
import {GetLunarDateString,GetSolarDateString,SolarYearDays,SolarMonthDays,LunarYearDays,LunarMonthDays,GetLeapMonth,FormatLunarMonth,FormatLunarDay,FormatLunarYear
} from "./lucnDate.js";
import { stringify } from "querystring";
import { nextTick } from "q";
export default {data() {return {ylist: null,mlist: null,dlist: null,data: {}};},methods: {// 取消err() {// 向父组件传值this.$emit("func", this.data);},// 确认send() {if (this.$refs.lunary.value &&this.$refs.lunarm.value &&this.$refs.lunard.value) {console.log(this.$refs.lunard.selectedIndex);this.data = {lunary: this.$refs.lunary.value,lunarm: this.$refs.lunarm.value,lunard: this.$refs.lunard.value,dindex: this.$refs.lunard.selectedIndex + 1};this.$emit("func", this.data);} else {this.$toast({message: "请选择生日",duration: 1000});}},// 年lunary() {this.mlist = this.lunarMonthOptions(this.$refs.lunary.value);console.log(this.lunarMonthOptions(this.$refs.lunary.value));// 从新选择年再次计算this.lunarm();},// 月lunarm() {console.log(this.$refs.lunarm.value);// 将农历月转化为公历月var disLength = this.$refs.lunarm.value.length;var shortName = this.$refs.lunarm.value.substring(disLength - 2, disLength);console.log(shortName);switch (shortName) {case "正月":this.m = 1;break;case "二月":this.m = 2;break;case "三月":this.m = 3;break;case "四月":this.m = 4;break;case "五月":this.m = 5;break;case "六月":this.m = 6;break;case "七月":this.m = 7;break;case "八月":this.m = 8;break;case "九月":this.m = 9;break;case "十月":this.m = 10;break;case "冬月":this.m = 11;break;case "腊月":this.m = 12;break;default:}// 输入当年当月的天数this.dlist =  this.lunarDayOptions(this.$refs.lunary.value, this.m);},// 天lunard() {//$("select").on("blur", function() {//  window.scroll(0, 0); //失焦后强制让页面归位//});},// 循环年lunarYearOptions(from, to, curyear) {var str = [];for (var i = from; i <= to; i++) {str.push(i);// str.push(FormatLunarYear(i) + "(" + i + ")");}return str;},// 循环月lunarMonthOptions(year, month) {var leapMonth = GetLeapMonth(year);var str = [];var from = 1;var to = 12;var leap = false;if (month > 12) {leap = true;month = month / 10;}for (var i = from; i <= to; i++) {str.push(FormatLunarMonth(i));if (leapMonth > 0 && i == leapMonth) {str.push("闰" + FormatLunarMonth(i));}}return str;},// 循环天lunarDayOptions(year, month, day) {console.log(year, month, day)var from = 1;var to = 0;var leap = false;if (month > 12) {month = month / 10;leap = true;var monthdaynum = (LunarMonthDays(year, month) >> 16) & 0xffff;} else {var monthdaynum = LunarMonthDays(year, month) & 0xffff;}to = monthdaynum;console.log(to)var str = [];for (var i = from; i <= to; i++) {str.push(FormatLunarDay(i));}return str;}},mounted() {// //设定当前农历公历日期var curSolarDate = [2019, 11, 4];// 年,月，日var curLunarDate = GetSolarDateString(curSolarDate);this.ylist = this.lunarYearOptions(1902, 2019, curLunarDate[0]);this.mlist = this.lunarMonthOptions(curLunarDate[0],curLunarDate[1],curLunarDate[2]);}
};
</script>
<style scoped>
.btn {height: 0.3rem;line-height: 1rem;font-size: 0.29rem;
}
.btn_left {float: left;padding-left: 0.1rem;color: #1989fa;
}
.btn_right {float: right;padding-right: 0.1rem;color: #1989fa;
}
.select {margin-top: 1rem;width: 100%;/* text-align: center; */display: flex;justify-content: space-around;overflow-y: hidden;
}
.select_y option {/* width: 33%; *//*去掉默认的下拉三角*//* appearance: none; */height: 0.7rem;padding: 0.2rem 0;
}
.select_m option {/* width: 33%; */height: 0.7rem;padding: 0.2rem 0;
}
.select_d option {/* width: 33%; */height: 0.7rem;padding: 0.2rem 0;
}
</style>>

在父组件中的使用

      <van-popup v-else v-model="show" position="bottom" :style="{ height: '40%' }"><nongli @func="getMsgFormSon"></nongli></van-popup>
//这里在对农历进行了转换方便后台的存储
getMsgFormSon(data) {if (Object.keys(data).length !== 0) {var disLength = data.lunarm.length;var shortName = data.lunarm.substring(disLength - 2, disLength);console.log(shortName);switch (shortName) {case "正月":this.m = 1;break;case "二月":this.m = 2;break;case "三月":this.m = 3;break;case "四月":this.m = 4;break;case "五月":this.m = 5;break;case "六月":this.m = 6;break;case "七月":this.m = 7;break;case "八月":this.m = 8;break;case "九月":this.m = 9;break;case "十月":this.m = 10;break;case "冬月":this.m = 11;break;case "腊月":this.m = 12;break;default:}this.y = data.lunary;this.dindex = data.dindex + 1;var time = this.y + "-" + this.m + "-" + this.dindex;this.BirthdaySR = dayjs(time).format("YYYY-MM-DD");this.userInfo.BirthdaySR = this.BirthdaySR + " " + "23:59:00";this.show = false;console.log(this.y + "-" + this.m + "-" + this.d);} else {this.show = false;}},

到此整个农历日期选择器基本实现，剩下的就是一些对样式的修改和调整。

vue实现农历日期选择器相关推荐

【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
[原创]自定义公历农历日期选择器
公历农历日期选择器项目地址:https://github.com/Carbs0126/GregorianLunarCalendar android自带的DatePicker具有日期选择的功能,但是由 ...
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
本文首发:<最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云> Vue 时间日期选择器(date-timepicker)组件在使用 Vue 框架开发中使 ...
用 Vue 实现原生日期选择器
效果: 部分代码 .vue <template><div class="date-select"><div class="date-sele ...
vue element的日期选择器，选择日期时间范围的限制
最近在做活动配置,那么就会需要配置活动的开始时间和活动的结束时间,对于活动开始时间选择范围是不能今天之前时间的,活动的结束时间也是,是不能选择今天之前的时间和活动开始之前时间的,有了明确的目的,现在就 ...
vue使用element日期选择器，选择日期少一天的问题
添加属性value-format="yyyy-MM-dd"即可
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
vue【element ui】el-date-picker 日期选择器控件限制可选的开始时间和结束时间
项目场景: 总结一下日期控件实现开始日期.结束日期的选择范围限制,以便更符合实际情况. 需求: 1.开始时间和结束时间都不能选当前日期之后的时间.(当前时间:2022年5月16日) 2.先选开始时间的 ...
js日期控件_11个开源的Github开源日期选择器组件，供你选择
介绍本文主要介绍几个Vue的时间日期选择器组件,目的在于让开发者们多一些选择,不管是从功能还是从样式,都可以选择一个适合的组件,这些组件没有绝对的好与不好,就看个人如何选择了,以下分别介绍十一个日期 ...
vue DatePicker日期选择器时差8小时
vue中使用element-ui中的日期选择器组件时,会造成时区差.在向数据库中做保存时发现传输的时间参数和前端控件所选时间端不匹配(相差8小时), 调试发现与后端接口没有问题,是控件本身的原因. 1 ...

vue实现农历日期选择器

实现公农历转换的算法

组件封装

在父组件中的使用

vue实现农历日期选择器相关推荐

最新文章

热门文章