需求：使用el-date-picker组件时显示农历数据。
修改思路：提取element-ui源码，添加相应样式，农历转化数据写在公共文件中引用。
一、提取组件
- 将在
node_modules>element-ui>packages下的date-picker组件文件夹的内容复制一份到自己项目的components目录下 ； - 在
main.js文件夹中导入放到components文件夹下的date-picker组件；(注意使用顺序)
// 导入修改本地后的element的datepicker
import DatePicker from '@/components/datePicker/index'
Vue.use(ElementUI)
Vue.use(DatePicker)- 注释date-picker>src>basic>time-spinnner和date-picker>src>panel>time-select中引入
scrollbar代码；(解决编译报错)
import { getRangeHours, getRangeMinutes, modifyTime } from 'element-ui/src/utils/date-util';
// import ElScrollbar from 'element-ui/packages/scrollbar';
import RepeatClick from 'element-ui/src/directives/repeat-click';
export default {
// components: { ElScrollbar },- 在date-picker>src>panel>date文件style中添加样式；(解决时间选择控件在弹出框中显示问题)
<style lang="scss">
.el-picker-panel {
z-index: 9999 !important;
}
</style>二、添加农历数据，修改组件数据
- 农历转化数据写在utils>date.js文件中；
/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
export default {
/**
* 农历1900-2100的润大小信息表
* @Array Of Property
* @return Hex
*/
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x16a95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, 0x092e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, 0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, 0x0d520, ], //2100
/**
* 公历每个月份的天数普通表
* @Array Of Property
* @return Number
*/
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
/**
* 天干地支之天干速查表
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
* @return Cn string
*/
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678', ],
/**
* 天干地支之地支速查表
* @Array Of Property
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
* @return Cn string
*/
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5', ],
/**
* 天干地支之地支速查表<=>生肖
* @Array Of Property
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
* @return Cn string
*/
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a', ],
/**
* 阳历节日
*/
festival: {
'1-1': {
title: '元旦节'
},
'2-14': {
title: '情人节'
},
'5-1': {
title: '劳动节'
},
'5-4': {
title: '青年节'
},
'6-1': {
title: '儿童节'
},
'9-10': {
title: '教师节'
},
'10-1': {
title: '国庆节'
},
'12-25': {
title: '圣诞节'
},
'3-8': {
title: '妇女节'
},
'3-12': {
title: '植树节'
},
'4-1': {
title: '愚人节'
},
'5-12': {
title: '护士节'
},
'7-1': {
title: '建党节'
},
'8-1': {
title: '建军节'
},
'12-24': {
title: '平安夜'
},
},
/**
* 农历节日
*/
lfestival: {
'12-30': {
title: '除夕'
},
'1-1': {
title: '春节'
},
'1-15': {
title: '元宵节'
},
'5-5': {
title: '端午节'
},
'8-15': {
title: '中秋节'
},
'9-9': {
title: '重阳节'
},
'7-7': {
title: '七夕'
},
},
/**
* 返回默认定义的阳历节日
*/
getFestival() {
return this.festival
},
/**
* 返回默认定义的内容里节日
*/
getLunarFestival(y, m, d) {
if (m == 12 && d == 29) {
if (this.lunar2solar(y, m, 30) == -1) {
delete this.lfestival['12-30']
this.lfestival['12-29'] = {
title: '除夕'
}
} else {
delete this.lfestival['12-29']
this.lfestival['12-30'] = {
title: '除夕'
}
}
//console.log(y, m, d, this.lunar2solar(y, m, 30));
}
return this.lfestival
},
/**
*
* @param {Object} 按照festival的格式输入数据，设置阳历节日
*/
setFestival(param = {}) {
this.festival = param
},
/**
*
* @param {Object} 按照lfestival的格式输入数据，设置农历节日
*/
setLunarFestival(param = {}) {
this.lfestival = param
},
/**
* 24节气速查表
* @Array Of Property
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
* @return Cn string
*/
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3', ],
/**
* 1900-2100各年的24节气日期速查表
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e', '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', ],
/**
* 数字转中文速查表
* @Array Of Property
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
* @return Cn string
*/
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', ],
/**
* 日期转农历称呼速查表
* @Array Of Property
* @trans ['初','十','廿','卅']
* @return Cn string
*/
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
/**
* 月份转农历称呼速查表
* @Array Of Property
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
* @return Cn string
*/
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a', ],
/**
* 返回农历y年一整年的总天数
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays: function (y) {
var i,
sum = 348
for (i = 0x8000; i > 0x8; i >>= 1) {
sum += this.lunarInfo[y - 1900] & i ? 1 : 0
}
return sum + this.leapDays(y)
},
/**
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth: function (y) {
//闰字编码 \u95f0
return this.lunarInfo[y - 1900] & 0xf
},
/**
* 返回农历y年闰月的天数 若该年没有闰月则返回0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays: function (y) {
if (this.leapMonth(y)) {
return this.lunarInfo[y - 1900] & 0x10000 ? 30 : 29
}
return 0
},
/**
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays: function (y, m) {
if (m > 12 || m < 1) {
return -1
} //月份参数从1至12，参数错误返回-1
return this.lunarInfo[y - 1900] & (0x10000 >> m) ? 30 : 29
},
/**
* 返回公历(!)y年m月的天数
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays: function (y, m) {
if (m > 12 || m < 1) {
return -1
} //若参数错误 返回-1
var ms = m - 1
if (ms == 1) {
//2月份的闰平规律测算后确认返回28或29
return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0 ? 29 : 28
} else {
return this.solarMonth[ms]
}
},
/**
* 农历年份转换为干支纪年
* @param lYear 农历年的年份数
* @return Cn string
*/
toGanZhiYear: function (lYear) {
var ganKey = (lYear - 3) % 10
var zhiKey = (lYear - 3) % 12
if (ganKey == 0) ganKey = 10 //如果余数为0则为最后一个天干
if (zhiKey == 0) zhiKey = 12 //如果余数为0则为最后一个地支
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
},
/**
* 公历月、日判断所属星座
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro: function (cMonth, cDay) {
var s =
'\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7' //座
},
/**
* 传入offset偏移量返回干支
* @param offset 相对甲子的偏移量
* @return Cn string
*/
toGanZhi: function (offset) {
return this.Gan[offset % 10] + this.Zhi[offset % 12]
},
/**
* 传入公历(!)y年获得该年第n个节气的公历日期
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
*/
getTerm: function (y, n) {
if (y < 1900 || y > 2100) {
return -1
}
if (n < 1 || n > 24) {
return -1
}
var _table = this.sTermInfo[y - 1900]
var _info = [
parseInt('0x' + _table.substr(0, 5)).toString(),
parseInt('0x' + _table.substr(5, 5)).toString(),
parseInt('0x' + _table.substr(10, 5)).toString(),
parseInt('0x' + _table.substr(15, 5)).toString(),
parseInt('0x' + _table.substr(20, 5)).toString(),
parseInt('0x' + _table.substr(25, 5)).toString(),
]
var _calday = [
_info[0].substr(0, 1),
_info[0].substr(1, 2),
_info[0].substr(3, 1),
_info[0].substr(4, 2),
_info[1].substr(0, 1),
_info[1].substr(1, 2),
_info[1].substr(3, 1),
_info[1].substr(4, 2),
_info[2].substr(0, 1),
_info[2].substr(1, 2),
_info[2].substr(3, 1),
_info[2].substr(4, 2),
_info[3].substr(0, 1),
_info[3].substr(1, 2),
_info[3].substr(3, 1),
_info[3].substr(4, 2),
_info[4].substr(0, 1),
_info[4].substr(1, 2),
_info[4].substr(3, 1),
_info[4].substr(4, 2),
_info[5].substr(0, 1),
_info[5].substr(1, 2),
_info[5].substr(3, 1),
_info[5].substr(4, 2),
]
return parseInt(_calday[n - 1])
},
/**
* 传入农历数字月份返回汉语通俗表示法
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
*/
toChinaMonth: function (m) {
// 月 => \u6708
if (m > 12 || m < 1) {
return -1
} //若参数错误 返回-1
var s = this.nStr3[m - 1]
s += '\u6708' //加上月字
return s
},
/**
* 传入农历日期数字返回汉字表示法
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
*/
toChinaDay: function (d) {
//日 => \u65e5
var s
switch (d) {
case 10:
s = '\u521d\u5341'
break
case 20:
s = '\u4e8c\u5341'
break
break
case 30:
s = '\u4e09\u5341'
break
break
default:
s = this.nStr2[Math.floor(d / 10)]
s += this.nStr1[d % 10]
}
return s
},
/**
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
*/
getAnimal: function (y) {
return this.Animals[(y - 4) % 12]
},
/**
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar: function (y, m, d) {
//console.log(this.initHoliday());
let {
workday,
holiday
} = this.initHoliday()
//参数区间1900.1.31~2100.12.31
y = parseInt(y)
m = parseInt(m)
d = parseInt(d)
//年份限定、上限
if (y < 1900 || y > 2100) {
return -1 // undefined转换为数字变为NaN
}
//公历传参最下限
if (y == 1900 && m == 1 && d < 31) {
return -1
}
//未传参 获得当天
if (!y) {
var objDate = new Date()
} else {
var objDate = new Date(y, parseInt(m) - 1, d)
}
var i,
leap = 0,
temp = 0
//修正ymd参数
var y = objDate.getFullYear(),
m = objDate.getMonth() + 1,
d = objDate.getDate()
var offset =
(Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) -
Date.UTC(1900, 0, 31)) /
86400000
for (i = 1900; i < 2101 && offset > 0; i++) {
temp = this.lYearDays(i)
offset -= temp
}
if (offset < 0) {
offset += temp
i--
}
//是否今天
var isTodayObj = new Date(),
isToday = false
if (
isTodayObj.getFullYear() == y &&
isTodayObj.getMonth() + 1 == m &&
isTodayObj.getDate() == d
) {
isToday = true
}
//星期几
var nWeek = objDate.getDay(),
cWeek = this.nStr1[nWeek]
//数字表示周几顺应天朝周一开始的惯例
if (nWeek == 0) {
nWeek = 7
}
//农历年
var year = i
var leap = this.leapMonth(i) //闰哪个月
var isLeap = false
//效验闰月
for (i = 1; i < 13 && offset > 0; i++) {
//闰月
if (leap > 0 && i == leap + 1 && isLeap == false) {
--i
isLeap = true
temp = this.leapDays(year) //计算农历闰月天数
} else {
temp = this.monthDays(year, i) //计算农历普通月天数
}
//解除闰月
if (isLeap == true && i == leap + 1) {
isLeap = false
}
offset -= temp
}
// 闰月导致数组下标重叠取反
if (offset == 0 && leap > 0 && i == leap + 1) {
if (isLeap) {
isLeap = false
} else {
isLeap = true
--i
}
}
if (offset < 0) {
offset += temp
--i
}
//农历月
var month = i
//农历日
var day = offset + 1
//天干地支处理
var sm = m - 1
var gzY = this.toGanZhiYear(year)
// 当月的两个节气
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var firstNode = this.getTerm(y, m * 2 - 1) //返回当月「节」为几日开始
var secondNode = this.getTerm(y, m * 2) //返回当月「节」为几日开始
// 依据12节气修正干支月
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
if (d >= firstNode) {
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
}
//传入的日期的节气与否
var isTerm = false
var Term = null
if (firstNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 2]
}
if (secondNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 1]
}
//日柱 当月一日与 1900/1/1 相差天数
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
var gzD = this.toGanZhi(dayCyclical + d - 1)
//该日期所属的星座
var astro = this.toAstro(m, d)
var solarDate = y + '-' + (m + '').padStart(2, 0) + '-' + (d + '').padStart(2, 0)
var lunarDate = year + '-' + month + '-' + day
var festival = this.festival
var lfestival = this.getLunarFestival(year, month, day)
var festivalDate = m + '-' + d
var lunarFestivalDate = month + '-' + day
return {
isWork: workday.includes(solarDate),
isHoliday: holiday.includes(solarDate),
date: solarDate,
lunarDate: lunarDate,
festival: festival[festivalDate] ? festival[festivalDate].title : null,
lunarFestival: lfestival[lunarFestivalDate] ?
lfestival[lunarFestivalDate].title : null,
lYear: year,
lMonth: month,
lDay: day,
Animal: this.getAnimal(year),
IMonthCn: (isLeap ? '\u95f0' : '') + this.toChinaMonth(month),
IDayCn: this.toChinaDay(day),
cYear: y,
cMonth: m,
cDay: d,
gzYear: gzY,
gzMonth: gzM,
gzDay: gzD,
isToday: isToday,
isLeap: isLeap,
nWeek: nWeek,
ncWeek: '\u661f\u671f' + cWeek,
isTerm: isTerm,
Term: Term,
astro: astro,
}
},
/**
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar: function (y, m, d, isLeapMonth) {
//参数区间1900.1.31~2100.12.1
y = parseInt(y)
m = parseInt(m)
d = parseInt(d)
var isLeapMonth = !!isLeapMonth
var leapOffset = 0
var leapMonth = this.leapMonth(y)
var leapDay = this.leapDays(y)
if (isLeapMonth && leapMonth != m) {
return -1
} //传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
if ((y == 2100 && m == 12 && d > 1) || (y == 1900 && m == 1 && d < 31)) {
return -1
} //超出了最大极限值
var day = this.monthDays(y, m)
var _day = day
//bugFix 2016-9-25
//if month is leap, _day use leapDays method
if (isLeapMonth) {
_day = this.leapDays(y, m)
}
if (y < 1900 || y > 2100 || d > _day) {
return -1
} //参数合法性效验
//计算农历的时间差
var offset = 0
for (var i = 1900; i < y; i++) {
offset += this.lYearDays(i)
}
var leap = 0,
isAdd = false
for (var i = 1; i < m; i++) {
leap = this.leapMonth(y)
if (!isAdd) {
//处理闰月
if (leap <= i && leap > 0) {
offset += this.leapDays(y)
isAdd = true
}
}
offset += this.monthDays(y, i)
}
//转换闰月农历 需补充该年闰月的前一个月的时差
if (isLeapMonth) {
offset += day
}
//1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
var cY = calObj.getUTCFullYear()
var cM = calObj.getUTCMonth() + 1
var cD = calObj.getUTCDate()
return `${cY}${cM}${cD}`
// return this.solar2lunar(cY, cM, cD)
},
// 初始化节假日
initHoliday: function () {
let workday = []
let holiday = []
window.Holiday.HolidayConfig.forEach(yearItem => {
yearItem.Work.forEach(item => {
workday.push(`${yearItem.Year}-${(item + '').substring(0,2)}-${(item + '').substring(2,4)}`)
})
yearItem.Holiday.forEach(item => {
holiday.push(`${yearItem.Year}-${(item + '').substring(0,2)}-${(item + '').substring(2,4)}`)
})
})
return {
workday,
holiday
}
}
}window.Holiday = {
"HolidayConfig": [
{
"Year": 2022,
"Work": ["0129", "0130", "0402", "0424", "0507", "1008", "1009"],
"Holiday": ["0103", "0131", "0201", "0202", "0203", "0204", "0404", "0405", "0502", "0503", "0504", "0603", "0912", "1003", "1004", "1005", "1006", "1007", "1231"]
},
{
"Year": 2023,
"Work": [],
"Holiday": ["0102", "0123", "0124", "0125", "0126", "0127"]
}
]
};- 修改date-picker>src>basic>date-table中数据；
<template>
<table
cellspacing="0"
cellpadding="0"
class="el-date-table"
@click="handleClick"
@mousemove="handleMouseMove"
:class="{ 'is-week-mode': selectionMode === 'week' }"
>
<tbody>
<tr>
<th v-if="showWeekNumber">{{ t("el.datepicker.week") }}</th>
<th v-for="(week, key) in WEEKS" :key="key">
{{ t("el.datepicker.weeks." + week) }}
</th>
</tr>
<tr
class="el-date-table__row"
v-for="(row, key) in rows"
:class="{ current: isWeekActive(row[1]) }"
:key="key"
>
<td v-for="(cell, key) in row" :class="getCellClasses(cell)" :key="key">
<div
:class="{
'is-weekend': [6, 7].includes(cell.lunar.nWeek),
'is-work': cell.lunar.isWork,
'is-holiday': cell.lunar.isHoliday,
}"
>
<span>
{{ cell.text }}
</span>
<section style="position: relative; top: 14px">
{{
cell.lunar.lunarFestival
? cell.lunar.lunarFestival
: cell.lunar.festival
? cell.lunar.festival
: cell.lunar.IDayCn == "初一"
? cell.lunar.IMonthCn
: cell.lunar.IDayCn
}}
</section>
</div>
</td>
</tr>
</tbody>
</table>
</template>
<script>
import {
getFirstDayOfMonth,
getDayCountOfMonth,
getWeekNumber,
getStartDateOfMonth,
prevDate,
nextDate,
isDate,
clearTime as _clearTime,
} from "element-ui/src/utils/date-util";
import Locale from "element-ui/src/mixins/locale";
import {
arrayFindIndex,
arrayFind,
coerceTruthyValueToArray,
} from "element-ui/src/utils/util";
import calendar from "@/utils/date";
const WEEKS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
const getDateTimestamp = function (time) {
if (typeof time === "number" || typeof time === "string") {
return _clearTime(new Date(time)).getTime();
} else if (time instanceof Date) {
return _clearTime(time).getTime();
} else {
return NaN;
}
};
// remove the first element that satisfies `pred` from arr
// return a new array if modification occurs
// return the original array otherwise
const removeFromArray = function (arr, pred) {
const idx =
typeof pred === "function" ? arrayFindIndex(arr, pred) : arr.indexOf(pred);
return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;
};
export default {
mixins: [Locale],
props: {
firstDayOfWeek: {
default: 7,
type: Number,
validator: (val) => val >= 1 && val <= 7,
},
value: {},
defaultValue: {
validator(val) {
// either: null, valid Date object, Array of valid Date objects
return (
val === null ||
isDate(val) ||
(Array.isArray(val) && val.every(isDate))
);
},
},
date: {},
selectionMode: {
default: "day",
},
showWeekNumber: {
type: Boolean,
default: false,
},
disabledDate: {},
cellClassName: {},
minDate: {},
maxDate: {},
rangeState: {
default() {
return {
endDate: null,
selecting: false,
};
},
},
},
computed: {
offsetDay() {
const week = this.firstDayOfWeek;
// 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置
return week > 3 ? 7 - week : -week;
},
WEEKS() {
const week = this.firstDayOfWeek;
return WEEKS.concat(WEEKS).slice(week, week + 7);
},
year() {
return this.date.getFullYear();
},
month() {
return this.date.getMonth();
},
startDate() {
return getStartDateOfMonth(this.year, this.month);
},
rows() {
// TODO: refactory rows / getCellClasses
const date = new Date(this.year, this.month, 1);
let day = getFirstDayOfMonth(date); // day of first day
const dateCountOfMonth = getDayCountOfMonth(
date.getFullYear(),
date.getMonth()
);
const dateCountOfLastMonth = getDayCountOfMonth(
date.getFullYear(),
date.getMonth() === 0 ? 11 : date.getMonth() - 1
);
day = day === 0 ? 7 : day;
const offset = this.offsetDay;
const rows = this.tableRows;
let count = 1;
const startDate = this.startDate;
const disabledDate = this.disabledDate;
const cellClassName = this.cellClassName;
const selectedDate =
this.selectionMode === "dates"
? coerceTruthyValueToArray(this.value)
: [];
const now = getDateTimestamp(new Date());
for (let i = 0; i < 6; i++) {
const row = rows[i];
if (this.showWeekNumber) {
if (!row[0]) {
row[0] = {
type: "week",
text: getWeekNumber(nextDate(startDate, i * 7 + 1)),
lunar: calendar.solar2lunar(
this.year,
this.month,
nextDate(startDate, i * 7 + 1)
),
};
}
}
for (let j = 0; j < 7; j++) {
let cell = row[this.showWeekNumber ? j + 1 : j];
if (!cell) {
cell = {
row: i,
column: j,
type: "normal",
inRange: false,
start: false,
end: false,
};
}
cell.type = "normal";
const index = i * 7 + j;
const time = nextDate(startDate, index - offset).getTime();
cell.inRange =
time >= getDateTimestamp(this.minDate) &&
time <= getDateTimestamp(this.maxDate);
cell.start = this.minDate && time === getDateTimestamp(this.minDate);
cell.end = this.maxDate && time === getDateTimestamp(this.maxDate);
const isToday = time === now;
if (isToday) {
cell.type = "today";
}
if (i >= 0 && i <= 1) {
const numberOfDaysFromPreviousMonth =
day + offset < 0 ? 7 + day + offset : day + offset;
if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
cell.text = count++;
//console.log(calendar.solar2lunar(this.year, this.month + 1, cell.text))
cell.lunar = calendar.solar2lunar(
this.year,
this.month + 1,
cell.text
);
} else {
cell.text =
dateCountOfLastMonth -
(numberOfDaysFromPreviousMonth - (j % 7)) +
1 +
i * 7;
cell.type = "prev-month";
cell.lunar = calendar.solar2lunar(
this.year,
this.month,
cell.text
);
}
} else {
if (count <= dateCountOfMonth) {
cell.text = count++;
cell.lunar = calendar.solar2lunar(
this.year,
this.month + 1,
cell.text
);
} else {
cell.text = count++ - dateCountOfMonth;
cell.type = "next-month";
cell.lunar = calendar.solar2lunar(
this.year,
this.month + 2,
cell.text
);
}
}
const cellDate = new Date(time);
cell.disabled =
typeof disabledDate === "function" && disabledDate(cellDate);
cell.selected = arrayFind(
selectedDate,
(date) => date.getTime() === cellDate.getTime()
);
cell.customClass =
typeof cellClassName === "function" && cellClassName(cellDate);
this.$set(row, this.showWeekNumber ? j + 1 : j, cell);
}
if (this.selectionMode === "week") {
const start = this.showWeekNumber ? 1 : 0;
const end = this.showWeekNumber ? 7 : 6;
const isWeekActive = this.isWeekActive(row[start + 1]);
row[start].inRange = isWeekActive;
row[start].start = isWeekActive;
row[end].inRange = isWeekActive;
row[end].end = isWeekActive;
}
}
return rows;
},
},
watch: {
"rangeState.endDate"(newVal) {
this.markRange(this.minDate, newVal);
},
minDate(newVal, oldVal) {
if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
this.markRange(this.minDate, this.maxDate);
}
},
maxDate(newVal, oldVal) {
if (getDateTimestamp(newVal) !== getDateTimestamp(oldVal)) {
this.markRange(this.minDate, this.maxDate);
}
},
},
data() {
return {
tableRows: [[], [], [], [], [], []],
lastRow: null,
lastColumn: null,
};
},
methods: {
cellMatchesDate(cell, date) {
const value = new Date(date);
return (
this.year === value.getFullYear() &&
this.month === value.getMonth() &&
Number(cell.text) === value.getDate()
);
},
getCellClasses(cell) {
const selectionMode = this.selectionMode;
const defaultValue = this.defaultValue
? Array.isArray(this.defaultValue)
? this.defaultValue
: [this.defaultValue]
: [];
const classes = [];
if ((cell.type === "normal" || cell.type === "today") && !cell.disabled) {
classes.push("available");
if (cell.type === "today") {
classes.push("today");
}
} else {
classes.push(cell.type);
}
if (
cell.type === "normal" &&
defaultValue.some((date) => this.cellMatchesDate(cell, date))
) {
classes.push("default");
}
if (
selectionMode === "day" &&
(cell.type === "normal" || cell.type === "today") &&
this.cellMatchesDate(cell, this.value)
) {
classes.push("current");
}
if (
cell.inRange &&
(cell.type === "normal" ||
cell.type === "today" ||
this.selectionMode === "week")
) {
classes.push("in-range");
if (cell.start) {
classes.push("start-date");
}
if (cell.end) {
classes.push("end-date");
}
}
if (cell.disabled) {
classes.push("disabled");
}
if (cell.selected) {
classes.push("selected");
}
if (cell.customClass) {
classes.push(cell.customClass);
}
return classes.join(" ");
},
getDateOfCell(row, column) {
const offsetFromStart =
row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay;
return nextDate(this.startDate, offsetFromStart);
},
isWeekActive(cell) {
if (this.selectionMode !== "week") return false;
const newDate = new Date(this.year, this.month, 1);
const year = newDate.getFullYear();
const month = newDate.getMonth();
if (cell.type === "prev-month") {
newDate.setMonth(month === 0 ? 11 : month - 1);
newDate.setFullYear(month === 0 ? year - 1 : year);
}
if (cell.type === "next-month") {
newDate.setMonth(month === 11 ? 0 : month + 1);
newDate.setFullYear(month === 11 ? year + 1 : year);
}
newDate.setDate(parseInt(cell.text, 10));
if (isDate(this.value)) {
const dayOffset =
((this.value.getDay() - this.firstDayOfWeek + 7) % 7) - 1;
const weekDate = prevDate(this.value, dayOffset);
return weekDate.getTime() === newDate.getTime();
}
return false;
},
markRange(minDate, maxDate) {
minDate = getDateTimestamp(minDate);
maxDate = getDateTimestamp(maxDate) || minDate;
[minDate, maxDate] = [
Math.min(minDate, maxDate),
Math.max(minDate, maxDate),
];
const startDate = this.startDate;
const rows = this.rows;
for (let i = 0, k = rows.length; i < k; i++) {
const row = rows[i];
for (let j = 0, l = row.length; j < l; j++) {
if (this.showWeekNumber && j === 0) continue;
const cell = row[j];
const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);
const time = nextDate(startDate, index - this.offsetDay).getTime();
cell.inRange = minDate && time >= minDate && time <= maxDate;
cell.start = minDate && time === minDate;
cell.end = maxDate && time === maxDate;
}
}
},
handleMouseMove(event) {
if (!this.rangeState.selecting) return;
let target = event.target;
if (target.tagName === "SPAN") {
target = target.parentNode.parentNode;
}
if (target.tagName === "DIV") {
target = target.parentNode;
}
if (target.tagName !== "TD") return;
const row = target.parentNode.rowIndex - 1;
const column = target.cellIndex;
// can not select disabled date
if (this.rows[row][column].disabled) return;
// only update rangeState when mouse moves to a new cell
// this avoids frequent Date object creation and improves performance
if (row !== this.lastRow || column !== this.lastColumn) {
this.lastRow = row;
this.lastColumn = column;
this.$emit("changerange", {
minDate: this.minDate,
maxDate: this.maxDate,
rangeState: {
selecting: true,
endDate: this.getDateOfCell(row, column),
},
});
}
},
handleClick(event) {
let target = event.target;
if (target.tagName === "SPAN" || target.tagName == "SECTION") {
target = target.parentNode.parentNode;
}
if (target.tagName === "DIV") {
target = target.parentNode;
}
if (target.tagName !== "TD") return;
const row = target.parentNode.rowIndex - 1;
const column = this.selectionMode === "week" ? 1 : target.cellIndex;
const cell = this.rows[row][column];
if (cell.disabled || cell.type === "week") return;
const newDate = this.getDateOfCell(row, column);
if (this.selectionMode === "range") {
if (!this.rangeState.selecting) {
this.$emit("pick", { minDate: newDate, maxDate: null });
this.rangeState.selecting = true;
} else {
if (newDate >= this.minDate) {
this.$emit("pick", { minDate: this.minDate, maxDate: newDate });
} else {
this.$emit("pick", { minDate: newDate, maxDate: this.minDate });
}
this.rangeState.selecting = false;
}
} else if (this.selectionMode === "day") {
this.$emit("pick", newDate);
} else if (this.selectionMode === "week") {
const weekNumber = getWeekNumber(newDate);
const value = newDate.getFullYear() + "w" + weekNumber;
this.$emit("pick", {
year: newDate.getFullYear(),
week: weekNumber,
value: value,
date: newDate,
});
} else if (this.selectionMode === "dates") {
const value = this.value || [];
const newValue = cell.selected
? removeFromArray(
value,
(date) => date.getTime() === newDate.getTime()
)
: [...value, newDate];
this.$emit("pick", newValue);
}
},
},
};
</script>
<style lang="scss">
$primary: #409eff;
.el-date-table td {
height: 45px;
}
.el-date-table td span {
z-index: 9;
}
.el-date-table td.start-date section,
.el-date-table td.end-date section {
color: #333;
}
.el-date-table td.start-date span,
.el-date-table td.end-date span {
color: #ffffff;
}
.el-date-table td div {
height: 45px;
}
.available .is-weekend {
//color: red !important;
&:hover {
color: $primary !important;
}
}
.available .is-work {
color: #606266 !important;
&:hover {
color: $primary !important;
}
}
.el-date-table td.today {
color: #409eff;
}
.available .is-holiday {
//color: red !important;
&:hover {
color: $primary !important;
}
}
.prev-month .is-weekend,
.next-month .is-weekend,
.prev-month .is-holiday,
.next-month .is-holiday {
//color: #ef5f5f !important;
}
</style>三、 扩展：节假日、周末标红
四、节假日和今天之前数据不可点击
<template>
<div>
<date-picker
v-model="value1"
type="date"
:picker-options="{
disabledDate,
firstDayOfWeek: 1,
}"
placeholder="选择日期"
>
</date-picker>
</div>
</template>
<script>
import DatePicker from "@/components/datePicker/index";
export default {
components: {
DatePicker,
},
data() {
return {
value1: "",
finishTime: "2100-01-01 00:00:00", // 限制到某月某日以后不能被选择
holidays: [], // 后端返回数据
};
},
created() {
window.Holiday.HolidayConfig.forEach((yearItem) => {
yearItem.Holiday.forEach((item) => {
this.holidays.push(
`${yearItem.Year}-${(item + "").substring(0, 2)}-${(
item + ""
).substring(2, 4)}`
);
});
});
},
methods: {
// 定义限制的方法
disabledDate(time) {
// 设置不能选择今天之前的时间
let beforeTime = new Date();
beforeTime.setTime(beforeTime.getTime() - 24 * 60 * 60 * 1000);
// 设置不能选择结束的时间,并把字符串转日期
let finishTime = Date.parse(this.finishTime.replace(/-/g, "-"));
return (
time.getTime() < beforeTime ||
time.getTime() > finishTime ||
time.getDay() == 6 ||
time.getDay() == 0 ||
this.holidays.indexOf(this.setyyyyMMdd(time.getTime()).slice(0, 10)) !=
-1
);
},
// 设置时间格式为yyyy-mm-dd方法
setyyyyMMdd(time) {
let date = new Date(time);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
var h = date.getHours();
h = h < 10 ? "0" + h : h;
var minute = date.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
var second = date.getSeconds();
second = second < 10 ? "0" + second : second;
return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
},
},
};
</script>
<style>
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
