<a-date-picker/>组件disabledDate、disabledTime设置

398 阅读1分钟

参考地址: 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
  }
}