TS封装el-date-picker和使用

1.封装组件 el-date-picker

<template>
  <el-row style="width:100%" class="verticalAlignCenter">

    //时间范围文字 垂直居中
    <el-col style="width:80px" class="verticalAlignCenter">
      <span>{{$t('i18n.timeRange')}}:</span>
    </el-col>

    //第一个时间框，宽度，垂直居中， 文本框不可输入，尺寸，绑定值，改变事件
    <el-col style="width:calc(50% - 52px)" class="verticalAlignCenter">
      <el-date-picker :editable="false" size="small" v-model="startTimeInner" @change="onStartTimeChange" type="datetime"
        :placeholder="$t('i18n.chooseStartTime')" />
    </el-col>

    //时间范围文字 垂直居中
    <el-col style="width:24px;display: inline-block;padding: 0 1%;" class="verticalAlignCenter">
      <span>{{$t('i18n.to')}}</span>
    </el-col>

    //第二个时间框，宽度，垂直居中，尺寸，绑定值，改变事件
    <el-col style="width:calc(50% - 52px)" class="verticalAlignCenter">
      <el-date-picker :editable="false" size="small" v-model="endTimeInner" @change="onEndTimeChange" type="datetime"
        :placeholder="$t('i18n.chooseEndTime')" />
    </el-col>

  </el-row>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import ComponentBase from '@src/views/ComponentBase'
import { Route } from 'vue-router'
import { watchFile } from 'fs'
import moment from 'moment'
// *****************************************************************
/***流量计数据对比 */
@Component({
  components: {}
})
export default class index extends ComponentBase {
  //此组件绑定的 用于显示的开始时间
  private startTimeInner: any = new Date()

 //此组件绑定的 用于显示的结束时间，今天当前的时间
  private endTimeInner: any = moment(new Date())
    .format('YYYY-MM-DD HH:mm:ss')

  //接收传过来的 开始时间
  @Prop({
    default: () => {
      return new Date()
    }
  })
  private startTime: any

  //调用组件后，传来的时间变化，把此组件的时间值换成传来的
  @Watch('startTime', { deep: true, immediate: true })
  private watchStartTimeChange(val: any) {
    this.startTimeInner = val
  }

  //接收传过来的结束时间
  @Prop({
    default: () => {
      return new Date()
    }
  })
  private endTime: any

 //调用组件后，传来的时间变化，把此组件的时间值换成传来的
  @Watch('endTime')
  private watchEndTimeChange(val: any) {
    this.endTimeInner = val
  }



        
  // **********************  暂时用不到   时间正常把值传出去**************************************
  mounted() {}
/*
 @Emit('update:startTime')
  private updateStartTime_inner(val: any) {}

  @Emit('update:endTime')
  private updateEndtime_inner(val: any) {}

  private onStartTimeChange(val: any) {
    window.console.log('onStartTimeChange:', val)
    if (this.endTime && this.endTime < val) {
      // 开始日期不能大于结束日期
      this.$message.warning(`${this.$t('i18n.startDatePrompt')}`)
      this.startTimeInner = this.startTime
    } else {
      this.updateStartTime_inner(val)
    }
  }

  private onEndTimeChange(val: any) {
    window.console.log('onEndTimeChange:', val)
    if (this.startTime && this.startTime > val) {
      this.$message.warning(`${this.$t('i18n.endDatePrompt')}`)
      this.endTimeInner = this.endTime
    } else {
      this.updateEndtime_inner(val)
    }
  }
*/
  // ************************************************************
 // @Emit('onSure')
  //private onSure(rows: any[]) {}

  //@Emit('onCancel')
 // private onCancel() {}
}
</script>
<style scoped>
</style>


//垂直居中的css
/*
.verticalAlignCenter {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  /* justify-content: center; */
  align-items: center;
}
*/

2.引入组件，使用

  <dateRangePicker value-format="YYYY-MM-DD HH:mm:ss" style="width:100%;float:left" :startTime.sync="queryCondition.time[0]" :endTime.sync="queryCondition.time[1]"></dateRangePicker>

  private queryCondition: any = {
    time: [
      moment()
        .subtract(30, 'days')
        .format('YYYY-MM-DD HH:mm:ss'),
      moment()
        .endOf('days')
        .format('YYYY-MM-DD HH:mm:ss')
    ]
  }