element ui DateTimePicker 日期區(qū)間選擇器，自定義快捷選項功能， 定義了最近一小時、昨天、今天、本月、上個月、最近一周、最近一個月、最近三個月 多種快捷選項。

<template>
<el-date-picker
    v-model="filterTime"
    type="datetimerange" //顯示類型  日期區(qū)間選擇
    :picker-options="pickerOptions"
     range-separator="至"
     start-placeholder="開始日期"
     end-placeholder="結(jié)束日期"
     format="yyyy-MM-dd HH:mm:ss" //顯示在輸入框中的格式
     value-format="yyyy-MM-dd HH:mm:ss" //綁定值的格式
     :default-time="['00:00:00', '23:59:59']" //選中日期后的默認具體時刻
     align="right">
  </el-date-picker>
</template>
<script>
  data(){
      return{
         pickerOptions: {
          shortcuts: [
           {
            text: '最近一小時',
            onClick(picker) {
              const end = new Date(); // 結(jié)束時間為當前時間
              const start = new Date(end.getTime() - 3600000); // 開始時間為當前時間減去一小時
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '今日',
            onClick(picker) {
              const start = new Date();
              start.setHours(0, 0, 0, 0); // 設(shè)置為00:00:00
              const end = new Date();
              end.setHours(23, 59, 59, 999); // 設(shè)置為23:59:59
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨日',
            onClick(picker) {
              const start = new Date();
              start.setDate(start.getDate() - 1); // 設(shè)置為昨天
              start.setHours(0, 0, 0, 0); // 設(shè)置為00:00:00
              const end = new Date();
              end.setDate(end.getDate() - 1);
              end.setHours(23, 59, 59, 999); // 設(shè)置為23:59:59
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const start = new Date();
              start.setDate(1); // 設(shè)置為本月的第一天
              start.setHours(0, 0, 0, 0); // 設(shè)置為00:00:00
              const end = new Date(); // 本月的今天
              end.setHours(23, 59, 59, 999); // 設(shè)置為23:59:59
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '上個月',
            onClick(picker) {
              const start = new Date();
              start.setMonth(start.getMonth() - 1); // 設(shè)置為上個月的第一天
              start.setDate(1);
              start.setHours(0, 0, 0, 0); // 設(shè)置為00:00:00
              const end = new Date();
              end.setDate(0); // 設(shè)置為上個月的最后一天
              end.setHours(23, 59, 59, 999); // 設(shè)置為23:59:59
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start.setHours(0, 0, 0, 0); // 設(shè)置為00:00:00
              end.setHours(23, 59, 59, 999); // 設(shè)置為23:59:59
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一個月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              start.setHours(0, 0, 0, 0); // 設(shè)置為00:00:00
              end.setHours(23, 59, 59, 999); // 設(shè)置為23:59:59
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三個月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              start.setHours(0, 0, 0, 0); // 設(shè)置為00:00:00
              end.setHours(23, 59, 59, 999); // 設(shè)置為23:59:59
              picker.$emit('pick', [start, end]);
            }
          }]
        },       
      }  
  }
</script>

效果圖：

文章來源地址http://www.zghlxwxcb.cn/news/detail-848542.html

到了這里，關(guān)于element ui DateTimePicker 日期選擇器自定義多種快捷選項的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！