1. <!-- 时间选择器 -->
    2. <template>
    3.     <el-date-picker
    4.     type="datetimerange"
    5.     start-placeholder="开始日期"
    6.     end-placeholder="结束日期"
    7.     value-format="yyyy-MM-dd HH:mm:ss"
    8.     picker-options="pickerOptions"
    9.     @change="handleChange"
    10.     v-bind="$attrs"
    11.     v-on="$listeners">
    12.   </el-date-picker>
    13. </template>
    15. <script>
    16. import moment from 'moment';
    18. export default {
    19.     name: 'date-picker',
    20.   data() {
    21.       return {
    22.         pickerOptions: {
    23.           shortcuts: [
    24.           {
    25.               text: '今天',
    26.             onClick(picker) {
    27.               const end = moment().endOf('day')
    28.                   .toDate();
    29.               const start = moment().startOf('day')
    30.                   .toDate();
    31.               picker.$emit('pick', [start, end]);
    32.             }
    33.           },
    34.           {
    35.               text: '昨天',
    36.             onClick(picker) {
    37.               const end = moment().subtract(1, 'day')
    38.                   .endOf('day')
    39.                   .toDate();
    40.               const start = moment().subtract(1, 'day')
    41.                   .startOf('day')
    42.                   .toDate();
    43.               picker.$emit('pick', [start, end]);
    44.             }
    45.           },
    46.           {
    47.             text: '最近7天',
    48.             onClick(picker) {
    49.               const end = moment().endOf('day')
    50.                   .toDate();
    51.               const start = moment().subtract(6, 'day')
    52.                   .startOf('day')
    53.                   .toDate();
    54.               picker.$emit('pick', [start, end]);
    55.             }
    56.           },
    57.           {
    58.               text: '最近30天',
    59.             onClick(picker) {
    60.               const end = moment().endOf('day')
    61.                   .toDate();
    62.               const start = moment().subtract(29, 'day')
    63.                   .startOf('day')
    64.                   .toDate();
    65.               picker.$emit('pick', [start, end]);
    66.             }
    67.           }
    68.         ]
    69.       }
    70.     }
    71.   },
    72.   methods: {
    73.       /**
    74.      * 用户确定选定的值时触发
    75.      * @param date
    76.      */
    77.     handleChange(date) {
    78.         this.$emit('dateChange', date);
    79.     }
    80.   }
    81. }
    82. </script>