基于vue+element的时间、农历、和日历的选择

最新推荐文章于 2024-09-18 15:36:28 发布
最新推荐文章于 2024-09-18 15:36:28 发布
阅读量2.1k 收藏 3
点赞数 1
分类专栏： elementUI vue javascript 文章标签： vue javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32154641/article/details/115675417
版权
vue 同时被 3 个专栏收录
14 篇文章 1 订阅
订阅专栏
elementUI
13 篇文章 1 订阅
订阅专栏
javascript
6 篇文章 0 订阅
订阅专栏

这篇文章主要写的是基于vue+element的获取时间、当前时间、对应的农历、星期还有日历的选择是一起的，有兴趣的小伙伴可以看下，如果我哪里写的不好，也请各位大佬指出。

  1. 首先我先让大家看下界面截图，里面包含的功能很多，我会一一为大家说明，截图如下：
  2. 在这里插入图片描述
  3. 首先就是你在时间那栏输入数字例如20210413，之后它会自动变成2021-04-13，默认获取的是当前的时间，也就是你所看到的时间，星期和农历，完整代码如下
<template>
	<div class="mt-2 start-date">
		<span class="date-name">日期</span>
		<div class="date-set">
			<div class="date-left">
				<div class="date-choose">
					<el-date-picker class="date-picker" v-date-format v-model="dateValue" type="date" placeholder="选择日期"
						style="">
					</el-date-picker>
					<div class="today" :class="{'date-time':isShow}">
						<span class="date-today">{{today}}</span>
					</div>
				</div>
				<el-input class="double-input second-input date-input" v-model="startdate" readonly placeholder="">
				</el-input>
			</div>
			<div class="date-middle">
				<!-- <i class="el-icon-date"></i> -->
				<el-popover
				  placement="bottom"
				  width="400"
				  height="400"
				  trigger="click"
				  v-model="visible">
				  <!-- 这里写展示的内容 -->
				  <el-calendar class="calendar-time" v-model="valueCalendar">
				  </el-calendar>
				  <el-button class="btn-date" icon="el-icon-date" slot="reference"></el-button>
				</el-popover>
			</div>
			<div class="date-right">
				<el-button class="up-btn" type="infor" @click="addDay"><i class="el-icon-arrow-up"></i></el-button>
				<el-button class="down-btn" type="infor" @click="reduceDay"><i class="el-icon-arrow-down"></i></el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment'
	import '../../directives/dateFormat.js'
	import {
		getYearMonthDay
	} from '../../components/lunar/computedLunarDate.js'
	export default {
		data() {
			return {
				// 默认是今天
				dateValue: moment(new Date()).format('YYYY-MM-DD'),
				startdate: '',
				today: '今天',
				// 获取的日期yyyy-MM-dd
				dateTime: '',
				isShow: false,
				// 日历
				valueCalendar: new Date(),
				// popup是否显示
				visible:false
			}
		},
		created() {
			console.log("天数", this.dateDiff("2021-04-13"));
			this.getWeek();
		},
		// 给他设置一个点击日历的日期点击事件
		mounted() {
			this.$nextTick(()=>{
				// 监听日历的日期
				var prevBtn = document.querySelector('tbody');
				prevBtn.addEventListener('click',()=>{
					// console.log("点击日历的日期",this.valueCalendar);
					// 这个是把Tue Apr 13 2021 08:00:00 GMT+0800 (中国标准时间)格式转化为2021-04-13
					let calendar = moment(this.valueCalendar).format('YYYY-MM-DD')
					this.dateValue = calendar;
					this.visible = false;
				});
				// 监听日历中今天的按钮
				// 点击今天
				  let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
				  prevBtn2.addEventListener('click',() => {
				    // console.log('今天');
					this.dateValue = moment(new Date()).format('YYYY-MM-DD')
					this.visible = false;
				  });
			})
		},
		methods: {
			//指定时间大于当前时间为正,指定时间小于当前时间为负
			dateDiff: function(targetDate) {
				let date1 = new Date(targetDate);
				let date2 = new Date();
				date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
				date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
				const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
				const diffDate = diff / (24 * 60 * 60 * 1000);
				// const diffDate = Math.abs(diff / (24 * 60 * 60 * 1000));//取正数
				return diffDate;
			},
			getWeek() {
				let time = new Date(this.dateValue);
				let year = time.getFullYear();
				console.log("年",year);
				let month = time.getMonth()+1;
				console.log("月",month);
				let date = time.getDate();
				console.log("日",date);
				// 天数
				let day = time.getDay();
				let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				let week = weeks[day];
				let nongli = getYearMonthDay(year, month, date)
				console.log("农历是", nongli);
				this.startdate = week + "  " + nongli;
			},
			// 点击向上减一天
			addDay(){
				let dateData = new Date(new Date(this.dateValue).getTime() - 24*60*60*1000);
				let datetime = moment(dateData).format('YYYY-MM-DD');
				this.dateValue = datetime;
			},
			// 点击向下加一天
			reduceDay(){
				let dateData = new Date(new Date(this.dateValue).getTime() + 24*60*60*1000);
				let datetime = moment(dateData).format('YYYY-MM-DD');
				this.dateValue = datetime;
			}
		},
		watch: {
			dateValue() {
				// console.log("选中的日期是", this.dateValue);
				console.log("获取的日期是", moment(this.dateValue).format('YYYY-MM-DD'))
				let dateTime = moment(this.dateValue).format('YYYY-MM-DD');
				this.dateValue = dateTime;
				if (this.dateDiff(dateTime) == 1) {
					this.today = "明天";
					this.isShow = false;
				} else if (this.dateDiff(dateTime) == 0) {
					this.today = "今天"
					this.isShow = false;
				} else if (this.dateDiff(dateTime) == -1) {
					this.today = "昨天"
					this.isShow = false;
				} else {
					this.isShow = true
				}
				this.getWeek();
			}
		}
	}
</script>

<style scoped="scoped">
	/* 日期选择 */
	.start-date {
		display: flex;
		margin-top: 10px;
		border: 1px solid #bbb;
		background-color: #f0f0f0;
	}

	.date-name {
		width: auto;
		line-height: 65px;
		text-align: center;
		padding: 10px 20px;
	}

	.day-input {
		/* width: 60px; */
		float: left;
	}

	.date-picker {
		width: 90px;
	}

	.date-picker>>>.el-input__inner {
		border: none;
		padding: 0 0 0 10px;
	}

	.date-picker>>>.el-input__prefix {
		display: none;
	}

	.date-picker>>>.el-input__suffix {
		display: none;
	}

	.day-input>>>.el-input__inner {
		font-weight: 700;
		color: #000000;
	}

	.date-input {
		/* width: 240px; */
	}

	.double-input /deep/ .el-input__inner {
		border: none;
		border-radius: 0;
	}

	.start-station-name>>>.el-input__inner {
		font-weight: 700;
		color: #000000;
	}

	.second-input /deep/ .el-input__inner {
		height: 25px;
		line-height: 25px;
		padding:0 8px;
	}

	.date-choose {
		display: flex;
		align-items: center;
	}

	.date-set {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}

	.date-left {
		width: 125px;
	}

	.date-middle {
		padding: 0 10px;
	}

	.date-right {
		width: 56px;
	}

	.down-btn {
		margin-left: 0px;
	}

	.date-time {
		display: none;
	}
	.btn-date{
		padding: 0;
	}
	.calendar-time >>> .el-calendar-day{
		height: auto;
	}
</style>

其中需要引入的三个文件分别是时间的格式化moment，自定义指令数字转化时间dateFormat，还有一个就是农历的转化computedLunarDate

并且其中的moment是vue的依赖包，你可以直接运行npm install moment --save进行安装，安装完之后在main.js中导入import Moment from ‘moment’，最后在你所需要的vue文件中直接import进去就行，
第二个数字转时间的，我会将代码贴进来，代码如下：

import Vue from 'vue'
import $ from 'jquery'; //在需要使用的页面中
import moment from 'moment' //引入js日期处理类库

// 时间选择器 - 输入格式转换
  Vue.directive('dateFormat', {
    inserted: function (el, binding, vnode) {
      const { value: _obj } = binding
      const { context: _this, data } = vnode
      const { expression: key } = data.model
      let arr = []
      const modelValue = function(value,len) {
        // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
		// if(value.length>0 && value.length <5 ){
		// 	console.log("这是什么值",value);
		// 	// value = value.replace(moment(value).format('hh:mm'),'$1:$2')
		// 	value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/,'$1:$2')
		// }else 
		if(value.length>5&&value.length<9) {
          value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式,2021-03-01
        }else if(value.length>9&&value.length<13){
          value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3 $4:$5') // 格式化输入格式,2021-03-01 09:50
        }else if(value.length>12){
          value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3 $4:$5:$6') // 格式化输入格式,2020-03-01 09:50:30
        }else{
          return false
        }
        //const newValue = value.replace(/-/g,"/"); //解决前台new Date（yyyy-MM-dd）转化时间相差8小时的问题,不知道靠不靠谱，改用moment
        //const time = value && value.constructor == String ? new Date(newValue) : value  // 转换时间格式
        const time = value && value.constructor == String ? moment(value) : value  // 转换时间格式
		console.log("时间格式是",time);
        let keys = key.split('.')
        if(arr.length === len) {
          arr = [];
        }
        arr.push(time)
		console.log("数组是",arr);
        // 判断指令是否有传值，是否有传数组的名称跟索引值，原因：转换出来的时间控件_this[key1][key2]取不到绑定的相关值
        if(!_obj) {
          // 处理简单的绑定
          if (keys && keys.length >= 2) {
            const [key1, key2, key3, key4] = keys
            if (key4) {
              _this[key1][key2][key3][key4] = len===2?arr:time;
            } else if (key3) {
              _this[key1][key2][key3] = len===2?arr:time;
            } else {
              _this[key1][key2] = len===2?arr:time;
            }
          }else{
            _this[key] = len===2?arr:time;
          }
        }else{
          // 处理循环中的时间控件绑定，需要传值，再去相应的数组中查找相应的字段赋值
          let objKey =  _obj.obj.split('.')
          if (objKey && objKey.length >= 2) {
          // 解构赋值
          const [flag1, flag2, flag3, flag4] = objKey;
          // _obj.index：索引，_obj.modelName：绑定的字段名
            if (flag4) {
              _this[flag1][flag2][flag3][flag4][_obj.index][_obj.modelName] = len===2?arr:time;
            } else if (flag3) {
              _this[flag1][flag2][flag3][_obj.index][_obj.modelName] = len===2?arr:time;
            } else {
              _this[flag1][flag2][_obj.index][_obj.modelName] = len===2?arr:time;
            }
          }else{
            _this[objKey][_obj.modelName] = len===2?arr:time;
          }
        }
      };
      if(_this && _this._isVue) {
        const $this = $($(el).children('input')[0])
        const $this2 = $($(el).children('input')[1])
        // 判断是范围的还是单个独立的日期时间控件，范围的两个输入框都要绑定change事件
        if($(el).children('input').length>1) {
          $this.on('change', function() {
            let value = $this.val()
			console.log("1111",value);
            modelValue(value,2);
          })
          $this2.on('change', function() {
            let value = $this2.val()
			console.log("2222",value);
            modelValue(value,2);
          })
        }else{
          $this.on('change', function() {
            let value = $this.val()
			console.log("3333",value);
            modelValue(value,1);
          })
        }
      }
    }
  })

当然要运行这个js文件，你也要首先先安装jQuery才行，具体怎么在vue中安装jQuery，大家可以上网百度查找，这里就不多说了；

接下来是第三个文件，根据指定时间获取对应的农历或者是显示对应的农历，代码如下：


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;

	debugger
    // 计算与公历基准的相差天数
    // 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,nly;
    // 确定输出的农历年份
    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];
    }
nly=ly
    // 将计算出来的农历年份转换为天干地支年
    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,
		lunarYearNum:nly,
		lunarStr:`${nly}年${lm}月${ld}`,
		lunarStr2:`${nly}年${lm}月${ld} (${ly})`
    }
};

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
			// return lm
        }
    }

    // 确定输出农历哪一天
    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
    return lm+'月'+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];
}

注意：我这个显示的农历有月份有日的，如果不想要月份的同学可以去这段代码里面修改下，大概在代码行171行左右，有一个 return lm+‘月’+ld; ，不想要月份的，可以把月前面的去掉。

里面还有一个日历的显示和点击事件，点击事件我只加了日历里面的日期和今天按钮的点击事件，前一个月和后一个月没有添加事件，需要的可以自己照着今天按钮的点击事件添加事件，由于element官网对于日历的描述很简单，也没有具体的日历事件，所以我是直接在mounted里面自定义事件，代码块如下：

// 给他设置一个点击日历的日期点击事件
		mounted() {
			this.$nextTick(()=>{
				// 监听日历的日期
				var prevBtn = document.querySelector('tbody');
				prevBtn.addEventListener('click',()=>{
					// console.log("点击日历的日期",this.valueCalendar);
					// 这个是把Tue Apr 13 2021 08:00:00 GMT+0800 (中国标准时间)格式转化为2021-04-13
					let calendar = moment(this.valueCalendar).format('YYYY-MM-DD')
					this.dateValue = calendar;
					this.visible = false;
				});
				// 监听日历中今天的按钮
				// 点击今天
				  let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
				  prevBtn2.addEventListener('click',() => {
				    // console.log('今天');
					this.dateValue = moment(new Date()).format('YYYY-MM-DD')
					this.visible = false;
				  });
			})
		},

以上就是这次的关于时间，农历，星期和日历的之间的显示和转化，如果哪里写的不好的，请大家见谅和指教！

春天里的水稻
关注
专栏目录
js实现日期农历与公历的互转
xi_nuo的博客
12-06 1981
使用年限：1900-2100 使用场景1：vue项目 js引入：import calendar from '../../utils/calendar.js' 方法调用： getNowDate(){ var nowDate = new Date() // 输入公历年月日，得出农历信息 var nongliStr = calendar.calendarFormatter.sol...
vue3【组件封装】日历 （默认标注今日，可选择日期，可标注日期，可切换月份，样式仿 Win11）
朝阳39的博客
08-22 998
原创日历组件
具有节假日与农历功能的JavaScript日历插件开发指南
最新发布
weixin_42437253的博客
09-18 1297
本文还有配套的精品资源，点击获取 简介：在网页开发中，日历插件是展示日期信息和相关功能的重要组件。本文介绍了一款具备公历和农历显示，以及节假日标注功能的JavaScript日历插件。它利用JavaScript强大的前端开发能力，为用户提供了一个功能丰富且可定制的日历界面。开发者可通过内置节假日数据结构或自定义节假日库来适应不同场景，并采用预计算算法或第三方库来处理农历转换。...
vue2使用element日期选择控件显示农历数据
Fansr_的博客
01-10 3706
el-date-picker显示农历、节假日数据
vue选择时间日期日历插件 : vuejs-date-calendar
热门推荐
一只路过的小码农
08-20 1万+
vue移动端时间日期日历选择插件 Demo（ 推荐手机端打开 ） https://zhangyongwnag.github.io/vuejs-date-calendar/example/#/Home 一、下载 npm install --save vuejs-date-calendar or yarn add vuejs-date-calendar 二、引入 import Vue fro...
vue+js纯手写日历（包含农历，节假日）
weixin_44601930的博客
07-08 1937
vue，js，纯手写日历
element ui 日历空控件添加农历 节气和家假日
eclipse_XiaoBai的博客
03-10 4232
背景: 按照客户需求,需要在日历控件上添加农历和节气 ,但是element ui控件中无弄里控件只能引入外部js来完成该功能, 1.引入calendar.js 2.调用方法 显示农历 2.1 // 公历转农历 solarToLunar (slotDate, slotData) { let solarDayArr = slotData.day.split('-') let lunarDay = calendar.solar2lunar(solarDayArr[0], sola
vue+elementUI实现简单日历功能
01-18
vue+elementUI简单的实现日历功能，供大家参考，具体内容如下 <div><el type=primary click=handlePrev><i class=el-icon-arrow-left></i>上一月</el></div> <div>{{ year }}年{{ month }}月{{ day }}日 ...
vue3+ElementPlus cron组件
04-09
这个组件基于Vue3框架，并利用了ElementPlus UI库的组件和设计风格，为用户提供了友好的界面和丰富的交互体验。 Vue3是Vue.js的最新版本，它带来了许多性能优化和新特性，如Composition API、Teleport、Suspense等...
vue实现年日历视图及休息日工作日设置功能
02-17
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个年日历视图，并集成休息日和工作日的设置功能。Vue.js是一个流行的轻量级前端框架，它提供了丰富的功能和组件系统，使得构建交互式用户界面变得简单高效。...
很全的显示阴历（农历）日期的js代码
10-30
经下面的代码保存在js中调用即可。
VUE时间戳转农历js文件
05-27
用户可下载当前文件之后，可以获取时间戳数据传进JS文件中的函数，函数处理完时间戳之后会返回当前对应的事件农历日期（中文形式），VUE时间戳转农历js文件
vue 农历日历
weixin_43749669的博客
01-04 2128
前景: 客户要求 后台管理系统 (element-UI) 能够填报 员工的 农历生日 ! 试了 element 的 el-calendar 不是 很好用! 网上找到了此作者的笔记: https://blog.csdn.net/qq_32109661/article/details/87794155, 借鉴的他的,现在 我把 根据需求 优化了一点点 后的 版本 分享给大家, 希望能帮助到你 ! 嘿嘿(▽) 下面 我们进入正题: 1:因为可能 很多地方要用,我把它直接封装成一个组件(如下图): 2: 引入一
【Vue+Element】实现日历任务展示
TomPig_1024
04-05 2125
使用Vue+Element实现简约日历以及任务
Vue3获取阴历/农历日期
徐三岁的博客
12-02 631
【代码】Vue3获取阴历/农历日期。
在Vue项目中获取当前日期的农历（阴历）
weixin_44483624的博客
04-06 3975
chinese-lunar-calendar npm安装 npm install --save chinese-lunar-calendar 在vue中的使用 <script> import { getLunar } from 'chinese-lunar-calendar' export default { data() { return { getLunarDay: '', year: new Date().getFullYear(), month: ne
vue - vue中对Vant日历组件（calendar）的二次封装
qq_43886365的博客
02-20 2882
vue中对Vant日历组件（calendar）的二次封装
vue显示农历_ElementUI显示农历的日历
weixin_33828635的博客
01-14 838
目前 Element 官方并没有打算支持农历显示的意愿，见 issues/11502 和 issues/2471。两种方法：第一种方法：使用 ele-calendar，lunarcalendar 属性表示是否需要农历。第二种方法：对 Calendar 组件进行自定义内容，具体方法如下：1、自己写阳历转阴历的方法或引入别人写好的 JS 文件，如 中国农历(阴阳历)和西元阳历即公历互转 JavaScr...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值