参考地址: www.cnblogs.com/ff2ting/p/1…
组件实现两个控件早晚时间的联动处理,第一个时间不能晚于第二个时间,第二个时间不能早于第一个时间。
import moment from 'moment' // 引入moment
import { getDisabledTimeResult } from 'DatePickerExtends.js' // 引入扩展文件
{
prop: 'time1',
label: '第一个时间',
type: 'date',
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
disabledDate: function(current) {
if(this.time2){
const time = moment(this.time2).endOf('day').subtract(0, 'days')
return current && current > time
}
return false
},
disabledTime: function(date) {
return getDisabledTimeResult(this.time2, date, '大于')
}
},
{
prop: 'time2',
label: '第二个时间',
type: 'date',
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
disabledDate: function(current) { // 设置不可编辑的日期
if(this.time1){
const time = moment(this.time1).endOf('day').subtract(1, 'days')
return current && current < time
}
return false
},
disabledTime: function(date) { // 设置不可编辑的时间
return getDisabledTimeResult(time1, '小于')
},
}
DatePickerExtends.js扩展文件
import moment from 'moment'
/**
* 获取不能编辑的时间点的结果
* @param {string} chooseDateTime
* @param {string} date
* @param {string} operation
* @returns {
* disabledHours: () => {},
* disabledMinutes: () => {},
* disabledSeconds: () => {}
* }
*/
export function getDisabledTimeResult(chooseDateTime, date, operation){
if(chooseDateTime !== null && chooseDateTime.length > 0){
const choose = getChooseTime(chooseDateTime)
const dateFormat = getDateFormat(date)
let chooseSec = getChooseSec(choose.sec, operation)
let result = {
disabledHours: () => rangeHours({
start: 0,
end: 24,
value: choose.hour,
chooseDay: choose.day,
earlyDay: dateFormat.day
}, operation),
disabledMinutes: () => rangeMinutes({
start: 0,
end: 60,
value: choose.min,
chooseday: choose.day,
day: dateFormat.day,
chooseh:choose.hour,
h: dateFormat.h
}, operation),
disabledSeconds: () => rangeSeconds({
start: 0,
end: 60,
value: chooseSec,
chooseday: choose.day,
day: dateFormat.day,
chooseh: choose.hour,
h: dateFormat.h,
choosem: choose.min,
m: dateFormat.m
}, operation)
}
return result
}
}
function getChooseTime(chooseDateTime){
const choosetime = moment(chooseDateTime).format('HH:mm:ss')
const chooseday = parseInt(moment(chooseDateTime).format('YYYY-MM-DD').split('-')[2])
const chooseh = parseInt(choosetime.split(':')[0])
const choosem = parseInt(choosetime.split(':')[1])
const choosesec = parseInt(choosetime.split(':')[2])
return {
day: chooseday,
hour: chooseh,
min: choosem,
sec: choosesec
}
}
function rangeHours(hourParam, operation){
let hourResult = []
if (hourParam.chooseDay == hourParam.earlyDay) {
hourResult = getRangeData(hourParam.start, hourParam.end, hourParam.value, operation)
}
return hourResult
}
function rangeMinutes(minParam, operation){
let minResult = []
if (minParam.chooseday === minParam.day && minParam.chooseh === minParam.h) {
minResult = getRangeData(minParam.start, minParam.end, minParam.value, operation)
}
return minResult
}
function rangeSeconds(secParam, operation){
let secResult = []
if (secParam.chooseday === secParam.day && secParam.chooseh === secParam.h && secParam.choosem === secParam.m) {
secResult = getRangeData(secParam.start, secParam.end, secParam.value, operation)
}
return secResult
}
function getGreaterThanRangeData(start, end, value){
const result = []
for (let i =start; i < end; i++) {
if (i > value) {
result.push(i)
}
}
return result
}
function getLessThanRangeData(start, end, value){
const result = []
for (let i =start; i < end; i++) {
if (i < value) {
result.push(i)
}
}
return result
}
function getRangeData(start, end, value, operation){
if(operation === '大于'){
return getGreaterThanRangeData(start, end, value)
}
if(operation == '小于'){
return getLessThanRangeData(start, end, value)
}
return []
}
function getChooseSec(chooseSec, operation){
// 不能相等,故大于-1,小于+1
if(operation == '大于'){
return chooseSec - 1
}
if(operation == '小于'){
return chooseSec + 1
}
return chooseSec
}
function getDateFormat(date){
const nowtime = date == null ? moment().format('HH:mm:ss') :moment(date.$d).format('HH:mm:ss')
const day = date == null ? parseInt(moment().format('YYYY-MM-DD').split('-')[2]) : parseInt(moment(date.$d).format('YYYY-MM-DD').split('-')[2])
const h = parseInt(nowtime.split(':')[0]) // 小时
const m = parseInt(nowtime.split(':')[1]) // 分
const s = parseInt(nowtime.split(':')[2]) // 秒
return {
day: day,
h: h,
m: m,
s: s
}
}