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

13 篇文章 1 订阅
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;
				  });
			})
		},

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值