基于vue+element的时间、农历、和日历的选择
这篇文章主要写的是基于vue+element的获取时间、当前时间、对应的农历、星期还有日历的选择是一起的，有兴趣的小伙伴可以看下，如果我哪里写的不好，也请各位大佬指出。
- 首先我先让大家看下界面截图，里面包含的功能很多，我会一一为大家说明，截图如下：
- 首先就是你在时间那栏输入数字例如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;
});
})
},
以上就是这次的关于时间，农历，星期和日历的之间的显示和转化，如果哪里写的不好的，请大家见谅和指教！