2024.3.29

type=date type=datetime type=datetimerange

DateTimePicker日期选择器：date，当天后的时间不可选

<el-date-picker
      v-model="date"
      type="date"
      placeholder="请选择时间"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      :disabled-date="disabledDate"
      :shortcuts="shortcuts"
      :clearable="false"
      style="width: 160px; margin-right: 8px"
      @change="handleChange"
  />

const shortcuts = [
    {
        text: '今天',
        value: new Date(),
    },
    {
        text: '昨天',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: '一周前',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
]
const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}

DateTimePicker日期和时间点：datetime，限制当天前的时间不可选

通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择

<el-date-picker 
  v-model="form.time" 
  type="datetime"
  :disabled-date="disableDate" 
  :disabled-hours="disabledHour"
  :disabled-minutes="disabledMinute" 
  :disabled-seconds="disabledSecond"
/>


/* 限制天 */
disableDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7;
}

/* 限制小时 */
export const disabledHour = () => {
  const arrs = []
  for (let i = 0; i < 24; i++) {
     if (new Date().getHours() <= i) continue;
     arrs.push(i)
  }
  return arrs;
}

/* 限制分 */
export const disabledMinute = () => {
  const arrs = []
  for (let i = 0; i < 60; i++) {
     if (new Date().getMinutes() <= i) continue;
     arrs.push(i)
  }
  return arrs;
}

/* 限制秒 */
export const disabledSecond = () => {
  const arrs = []
  for (let i = 0; i < 60; i++) {
     if (new Date().getSeconds() <= i) continue;
     arrs.push(i)
  }
  return arrs;
}

• element plus 禁用当前时间之前时间（包含时分秒）

DateTimePicker日期和时间范围：datetimerange

设置type为datetimerange即可选择日期和时间范围

需求

1. 默认值，开始时间-当天开始时间"00:00:00"；结束时间-当前时间；
2. 选择范围：当前时间之前的时间可选；
3. default-time：默认的起始与结束时刻

default-time接受一个数组，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻

const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]

4. disabled-date：禁用日期，只能禁用年月日，时分秒没办法禁用；
5. 存在清空按钮，清空之后恢复到默认值，此时需要通过watch监听；
6. 因为没法限制时分秒，所以通过手动控制，如果选择时间大于当前时间，则改为当前时间。

 <el-date-picker
      v-model="searchParam.data.dataTime"
      type="datetimerange"
      format="YYYY-MM-DD HH:mm:ss"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      style="flex: none; width: 360px"
      :default-time="defaultTime"
      :disabled-date="disabledDate"
      @change="(val:any)=>handleChange('dataTime',val)"
  />

const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
    curDate = parseTime(new Date(), '{y}-{m}-{d}'),
    startTimeInit = new Date(curDate + ' 00:00:00'), // 当天0点
    endTimeInit = new Date()

const searchParam = reactive({
   data:{
      startTime: parseTime(startTimeInit),
      endTime: parseTime(endTimeInit),
      dataTime: [startTimeInit, endTimeInit],
   }
})

// 限制年月日--当天后的天数不可选择
const disabledDate = (date: any) => {
    return date.getTime() > Date.now()
}
// 监听dataTime数据，清空后重新赋值默认值
watch(
    () => searchParam.data.dataTime,
    (newVal) => {
        if (newVal == null) {
            searchParam.data.dataTime = [startTimeInit, endTimeInit]
        }
    },
)

const handleChange = (key: string, val: any) => {
    // console.log(val, 'val----')
    if (key === 'dataTime') {
        let startTime: any = val ? parseTime(val[0]) : parseTime(startTimeInit), //'2024-3-29 11:07:36'
            endTime: any = val ? parseTime(val[1]) : parseTime(endTimeInit)
      
        const nowTime: any = parseTime(new Date())

        if (endTime > nowTime) {
            //选择时间大于当前时间，则改为当前时间
            endTime = endTime.split(' ')[0] + ' ' + nowTime.split(' ')[1]
        }
        searchParam.data = {
            ...searchParam.data,
            startTime,
            endTime,
            dataTime: [startTime, endTime],
        }
    } else {
        searchParam.data[key] = val
    }

    getTableList()
}

日期格式化parseTime方法

/**
 * 日期格式化
 * @param timeStr
 * @param pattern
 * @returns
 */
export function parseTime(timeStr: string | number | object, pattern?: string) {
    let time = timeStr
    if (arguments.length === 0 || !time) {
        return null
    }
    const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
    let date: any
    if (typeof time === 'object') {
        date = time
    } else {
        if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
            time = parseInt(time)
        } else if (typeof time === 'string') {
            time = time
                .replace(new RegExp(/-/gm), '/')
                .replace('T', ' ')
                .replace(new RegExp(/.[\d]{3}/gm), '')
        }
        if (typeof time === 'number' && time.toString().length === 10) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}

效果图