环境说明:
Vue3 + Element Plus ui
这次关于Element Plus 日期选择器组件二次封装,其中为了快速开发用到 moment 日期插件。
特殊情况说明:
1. 如果结束时间为00:00:00,那么开始时间最大为当天的00:00:00
2.如果结束时间为23:59:59 ,那么结束时间最小为当天的23:59:59
其他情况说明:
结束时间大于开始时间 1个小时
其他插件:
moment
npm install moment --save
mian.js 引入
import moment from 'moment';
moment.locale('zh-cn');
app.config.globalProperties.$moment = moment
placeholder="请输入开始时间" :style="{ width: porp.width + 'px' }" :format="porp.format" :disabledDate="startDisabledDate"
:disabled-hours="startDisabledHours" :disabled-minutes="startDisabledMinutes"
:disabled-seconds="startDisabledSeconds" />
-
placeholder="请输入结束时间" :style="{ width: porp.width + 'px' }" :format="porp.format" :disabledDate="endDisabledDate"
:disabled-hours="endDisabledHours" :disabled-minutes="endDisabledMinutes" :disabled-seconds="endDisabledSeconds" />
import { ref, reactive, getCurrentInstance, watch } from 'vue';
import { ElMessage } from 'element-plus';
const { proxy }: any = getCurrentInstance();
const startValue = ref();
const endValue = ref();
const emit = defineEmits(['onchange'])
interface defaultTime {
startValue: any;
endValue: any;
}
/*
* 父传子,接收参数
* type:不支持 dates datetimerange/daterange/ monthrange
*/
interface Props {
type?: any;//日期选择器类型 year/month/date/datetime/ week/
defaultValue?: Object; // 开始时间和结束时间
format?: any;// 展示的时间格式,同时也是返回的时间格式
width?: String | Number; //宽度
clearable?: any; //是否清除按钮
startTime?: any;//开始最小时间
startTimeStatus?: any;//是否进行最小时间最大时间处理
endTime?: any;//结束最小时间
startEndNumDay?: Number | String;//开始时间和结束时间间隔的最大天数
}
/**
* type 类型为datetime 禁止选中的时间,时分秒选择出现
* 在类型为datetime的情况下,结束时间比开始时间大于1小时
*
*/
const porp = withDefaults(defineProps
(), { type: 'datetime',//时间类型
defaultValue: () => reactive
({ startValue: '',//开始时间
endValue: '',// 结束时间
}),
format: 'YYYY-MM-DD HH:mm:ss',// 展示的时间格式,同时也是返回的时间格式
width: '220',//宽度
clearable: true,//是否清除按钮
startTimeStatus: false,//是否进行最小时间最大时间处理
startTime: '',//开始最小时间
endTime: '',//结束最小时间
startEndNumDay: '',//开始时间和结束时间间隔的最大天数
});
endValue.value = porp.defaultValue.endValue
startValue.value = porp.defaultValue.startValue
// 开始时间限制
const startDisabledDate = (time: Date) => {
// 开始时间的最小时间
if (porp.startTimeStatus && porp.startTime != '') {
return time.getTime() < new Date(porp.startTime).getTime() || time.getTime() > new Date(endValue.value).getTime()
} else if (porp.startTimeStatus && porp.startEndNumDay != '') {
return time.getTime() < new Date(endValue.value).getTime() - 24 * 60 * 60 * 1000 * porp.startEndNumDay || time.getTime() > new Date(endValue.value).getTime()
} else {
return time.getTime() > new Date(endValue.value).getTime()
}
}
const startDisabledHours = () => {
const a = [];
if (endValue.value == '') {
return a;
} else {
let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');
let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');
if (new Date(endValue.value).getHours() == 0 && st == et) {
for (let i = 0; i < 24; i++) {
// 限制之前 < 之后 > ,下面同理
var stx = Number(new Date(endValue.value).getHours())
if (stx >= i) continue;
a.push(i);
}
return a;
} else if (et == st) {
for (let i = 0; i < 24; i++) {
// 限制之前 < 之后 > ,下面同理
if (new Date(endValue.value).getHours() - 1 >= i) continue;
a.push(i);
}
return a;
} else {
for (let i = 0; i < 24; i++) {
// 限制之前 < 之后 > ,下面同理
var stx = Number(new Date(endValue.value).getHours()) - 1
if (stx <= i) continue;
a.push(i);
}
return a;
}
}
};
const startDisabledMinutes = () => {
const a = [];
if (endValue.value == '') {
return a;
} else {
let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');
let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');
if (new Date(endValue.value).getHours() == 0 && new Date(endValue.value).getMinutes() == 0 && et == st) {
for (let i = 0; i < 60; i++) {
// 限制之前 < 之后 > ,下面同理
if (new Date(endValue.value).getMinutes() >= i) continue;
a.push(i);
}
return a;
} else if (et == st) {
return a;
} else {
for (let i = 0; i < 60; i++) {
// 限制之前 < 之后 > ,下面同理
if (new Date(endValue.value).getMinutes() <= i) continue;
a.push(i);
}
return a;
}
}
}
const startDisabledSeconds = () => {
const a = [];
if (endValue.value == '') {
return a;
} else {
let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');
let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');
if (new Date(endValue.value).getHours() == 0 && new Date(endValue.value).getSeconds() == 0 && et == st) {
for (let i = 0; i < 60; i++) {
// 限制之前 < 之后 > ,下面同理
if (new Date(endValue.value).getSeconds() >= i) continue;
a.push(i);
}
return a;
} else if (et == st) {
return a;
} else {
for (let i = 0; i < 60; i++) {
// 限制之前 < 之后 > ,下面同理
if (new Date(endValue.value).getSeconds() <= i) continue;
a.push(i);
}
return a;
}
}
}
// 结束时间限制
const endDisabledDate = (time: Date) => {
//处理时分秒情况下,开始时间的时间戳问题
if (startValue.value != '') {
let st = proxy.$moment(startValue.value).subtract(1, 'day').format('YYYY-MM-DD') + ' 23:59:59'
if (porp.startTimeStatus && porp.endTime != '') {
return new Date(st).getTime() >= time.getTime() || time.getTime() > new Date(porp.endTime).getTime()
} else if (porp.startTimeStatus && porp.startEndNumDay != '') {
return new Date(st).getTime() >= time.getTime() || time.getTime() > new Date(startValue.value).getTime() + 24 * 60 * 60 * 1000 * porp.startEndNumDay
} else {
return new Date(st).getTime() >= time.getTime()
}
} else {
return new Date(startValue.value).getTime() >= time.getTime()
}
}
const endDisabledHours = () => {
const a = [];
if (startValue.value == '') {
return a;
} else {
let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');
let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');
if (et == st && new Date(startValue.value).getHours() != 23) {
for (let i = 0; i < 24; i++) {
// 限制之前 < 之后 > ,下面同理
var stx = Number(new Date(startValue.value).getHours()) + 1
if (stx <= i) continue;
a.push(i);
}
return a;
} else if (et == st && new Date(startValue.value).getHours() == 23) {
for (let i = 0; i < 24; i++) {
// 限制之前 < 之后 > ,下面同理
var stx = Number(new Date(startValue.value).getHours())
if (stx <= i) continue;
a.push(i);
}
return a;
} else {
// for (let i = 0; i < 24; i++) {
// var stx = Number(new Date(startValue.value).getHours()) + 1
// if (stx >= i) continue;
// a.push(i);
// }
return a;
}
}
};
const endDisabledMinutes = () => {
const a = [];
let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');
let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');
if (et == st && new Date(startValue.value).getHours() == 23) {
for (let i = 0; i < 60; i++) {
// 限制之前 < 之后 > ,下面同理
if (new Date(startValue.value).getMinutes() <= i) continue;
a.push(i);
}
return a;
} else {
return a;
}
}
const endDisabledSeconds = () => {
const a = [];
let et = proxy.$moment(endValue.value).format('YYYY-MM-DD');
let st = proxy.$moment(startValue.value).format('YYYY-MM-DD');
if (et == st && new Date(startValue.value).getHours() == 23) {
for (let i = 0; i < 60; i++) {
// 限制之前 < 之后 > ,下面同理
if (new Date(startValue.value).getSeconds() <= i) continue;
a.push(i);
}
return a;
} else {
return a;
}
}
const startTime = (val: any) => {
if (val == null) {
startValue.value = ''
} else {
startValue.value = val
}
emit('onchange', {
startValue: startValue.value == '' ? '' : proxy.$moment(startValue.value).format(porp.format),
endValue: endValue.value == '' ? '' : proxy.$moment(endValue.value).format(porp.format),
})
}
const endTime = (val: any) => {
if (val == null) {
endValue.value = ''
} else {
endValue.value = val
}
emit('onchange', {
startValue: startValue.value == '' ? '' : proxy.$moment(startValue.value).format(porp.format),
endValue: endValue.value == '' ? '' : proxy.$moment(endValue.value).format(porp.format),
})
}
.my-el-date-picker {
.my-el-data-space {
margin: 0 10px;
}
}