elementUI 时间选择器常用配置详解

elementUI提供了时间选择器等组件，使得我们可以快速的搭建项目，完成相关功能，说下时间选择器的常用配置项

常用配置可以参考elementUI官网查看，包括选择日，周，月，年，多个日期，或者选择时间范围，不同的类型取决于

时间组件配置项type的不同

实际应用时需要许多特殊要求，这里大概分享下

// 简单的时间选择器应用

<el-date-picker
  v-model="value"
  type="daterange"
  align="right"
  unlink-panels // 取消上下两个面板之间的联动
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions" // 当前日期选择器特有选项
  >
</el-date-picker>

通过配置picker-options中的disabledDate属性，而disabledDate通常是一个函数，其有一个默认的参数，表示可供选择的时间，还有一个为布尔类型的返回值，返回true表示该时间可用，反之为不可用。 

    pickerOptions: {
        // 查询时间最大间隔15天
          onPick: ({ maxDate, minDate }) => { // 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效
            this.choiceDate = minDate.getTime()
            if (maxDate) {
              this.choiceDate = ''
            }
          },
          disabledDate: (time) => { // 禁用项，除过当前15天之外的日期禁用
            if (this.choiceDate !== '') {
              const one = 14 * 24 * 3600 * 1000
              const minTime = this.choiceDate - one
              const maxTime = this.choiceDate + one
              return time.getTime() > Date.now() || time.getTime() < minTime || time.getTime() > maxTime
            } else {
              return time.getTime() > Date.now()
              // 设置不能选择当天
              // return time.getTime() > Date.now() - 8.64e7;
            }
          },
          shortcuts: [ // 时间选择器快捷选项
            {
              text: '4小时',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 4)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '8小时',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 8)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近1天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近3天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近7天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                end.setTime(end.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近15天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        }

// 页面初始化加载禁用一些选项

//script
data() {
      return {
      value: '',
      pickerOptions: {} 
}

created () {
     this.pickerOptions = function (date)  {
           return disabledDate(time) {
              return time.getTime() < new Date(date).getTime();
           }
     }
}

// HTML
 <el-date-picker
      v-model="value"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions(DateParam)">
 </el-date-picker>

// 常用禁用
data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now(); // 今天之后的日期不能选择(不包括今天)

            // return time.getTime() > Date.now() - 8.64e7; // 今天包括今天之后的日期不能选择
            
            // return time.getTime() < Date.now() // 今天包括今天之前的不能选择
              
            // return time.getTime() < Date.now() - 8.64e7 // 今天以前的不能选择(不包括今天)
          }
        },  
        // 设置不能选择当前时间之前的时分秒
        selectableRange: moment(new Date().getTime()).format("HH:mm:ss") + ' - 23:59:59'
   }     
}  

// 设置选择三个月之前到今天的日期
disabledDate(time) {
  let curDate = (new Date()).getTime();
  let three = 90 * 24 * 3600 * 1000;
  let threeMonths = curDate - three;
  return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}

 

下面分享下项目封装的时间控件

<template>
  <el-date-picker
    v-model.trim="startEnd"
    type="datetimerange"
    :clearable="false"
    :default-time="defaultTime"
    :picker-options="hideToday?pickerOpt:pickerOptions"
    range-separator="——"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    size="small"
    class="ztree"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss">
  </el-date-picker>

</template>

// initDate   下面会用到
export function initDate(date, end) {
  if (!_.isDate(date)) {
    date = new Date()
  }
  const tempDate = _.cloneDeep(date)
  tempDate.setHours(end ? 23 : 0)
  tempDate.setMinutes(end ? 59 : 0)
  tempDate.setSeconds(end ? 59 : 0)
  return formatDate(tempDate, 'yyyy-MM-dd hh:mm:ss')
}

<script>
  import { initDate } from '@/utils/date'
  export default {
    name: 'DataPickers',
    props: {
      // 是否隐藏快捷键今天 默认不隐藏
      hideToday: {
        type: Boolean,
        default() {
          return false
        }
      },
      selectToday: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    data() {
      return {
        defaultTime: ['00:00:00', '23:59:59'],
        startEnd: [initDate(), initDate(new Date(), true)],
        // 不包含今天的快捷选项
        pickerOpt: {
          // 查询时间最大间隔15天
          onPick: ({ maxDate, minDate }) => {
            this.choiceDate = minDate.getTime()
            if (maxDate) {
              this.choiceDate = ''
            }
          },
          disabledDate: (time) => {
            if (this.choiceDate !== '') {
              const one = 14 * 24 * 3600 * 1000
              const minTime = this.choiceDate - one
              const maxTime = this.choiceDate + one
              return time.getTime() > Date.now() || time.getTime() < minTime || time.getTime() > maxTime
            } else {
              return time.getTime() > Date.now()
            }
          },
          shortcuts: [
            {
              text: '昨天',
              onClick(picker) {
                const yesterday = new Date()
                yesterday.setDate(yesterday.getDate() - 1)
                picker.$emit('pick', [initDate(yesterday), initDate(yesterday, true)])
              }
            },
            {
              text: '最近3天',
              onClick(picker) {
                const date = new Date()
                date.setDate(date.getDate() - 3)
                const dataEnd = new Date()
                dataEnd.setDate(dataEnd.getDate() - 1)
                picker.$emit('pick', [initDate(date), initDate(dataEnd, true)])
              }
            },
            {
              text: '最近7天',
              onClick(picker) {
                const date = new Date()
                date.setDate(date.getDate() - 7)
                const dataEnd = new Date()
                dataEnd.setDate(dataEnd.getDate() - 1)
                picker.$emit('pick', [initDate(date), initDate(dataEnd, true)])
              }
            }
            // ,{
            //   text: '最近1月',
            //   onClick(picker) {
            //     const date = new Date()
            //     date.setMonth(date.getMonth() - 1)
            //     const dataEnd = new Date()
            //     dataEnd.setDate(dataEnd.getDate() - 1)
            //     picker.$emit('pick', [initDate(date), initDate(dataEnd, true)])
            //   }
            // }
          ]
        },
        pickerOptions: {
          // 查询时间最大间隔15天
          onPick: ({ maxDate, minDate }) => {
            this.choiceDate = minDate.getTime()
            if (maxDate) {
              this.choiceDate = ''
            }
          },
          disabledDate: (time) => {
            if (this.choiceDate !== '') {
              const one = 14 * 24 * 3600 * 1000
              const minTime = this.choiceDate - one
              const maxTime = this.choiceDate + one
              return time.getTime() > Date.now() || time.getTime() < minTime || time.getTime() > maxTime
            } else {
              return time.getTime() > Date.now()
            }
          },
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', [initDate(), initDate(new Date(), true)])
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const yesterday = new Date()
                yesterday.setDate(yesterday.getDate() - 1)
                picker.$emit('pick', [initDate(yesterday), initDate(yesterday, true)])
              }
            },
            {
              text: '最近3天',
              onClick(picker) {
                const date = new Date()
                date.setDate(date.getDate() - 3)
                const dataEnd = new Date()
                dataEnd.setDate(dataEnd.getDate() - 1)
                picker.$emit('pick', [initDate(date), initDate(dataEnd, true)])
              }
            },
            {
              text: '最近7天',
              onClick(picker) {
                const date = new Date()
                date.setDate(date.getDate() - 7)
                const dataEnd = new Date()
                dataEnd.setDate(dataEnd.getDate() - 1)
                picker.$emit('pick', [initDate(date), initDate(dataEnd, true)])
              }
            }
            // ,
            // {
            //   text: '最近1月',
            //   onClick(picker) {
            //     const date = new Date()
            //     date.setMonth(date.getMonth() - 1)
            //     const dataEnd = new Date()
            //     dataEnd.setDate(dataEnd.getDate() - 1)
            //     picker.$emit('pick', [initDate(date), initDate(dataEnd, true)])
            //   }
            // }
          ]
        }
      }
    },
    watch: {
      startEnd(arr) {
        this.$emit('startEnd', arr)
      }
    },
    methods: {
      resetDate() {
        const date = new Date()
        date.setDate(date.getDate() - 7)
        const dataEnd = new Date()
        dataEnd.setDate(dataEnd.getDate() - 1)
        this.startEnd = this.selectToday ? [initDate(), initDate(new Date(), true)] : [initDate(date), initDate(dataEnd, true)]
        this.$emit('startEnd', this.startEnd)
      }
    },
    created() {
      this.resetDate()
    }
  }
</script>