el-ement 获取开始时间和结束时间

写项目遇到一个获取时间的功能，简单的记录一下。

 

第一种：获取到开始时间和结束时间，不精确到时分秒。

 

1，先对界面进行布局，我拿两个时间框为例

<el-date-picker   class="width-258"  prefix-icon="el-icon-date"
   v-model="participateForm.Specified"   type="daterange"
   start-placeholder="开始时间"    end-placeholder="结束时间"
  value-format="yyyy-MM-dd @change="onclicksettime($event,'1')" />

<el-date-picker class="width-258"   prefix-icon="el-icon-date"
 v-model="activesForm.activeTime" type="daterange"
 range-separator="至" start-placeholder="开始时间"
 end-placeholder="结束时间" value-format="yyyy-MM-dd"
 @change="onclicksettime($event,'2')" />

 

2,自定义两个开始时间和结束时间

      wheretime: {
        firstBeginTime: '', //开始时间格式yyyy-MM-dd
        secondBeginTime: '', //时间结束时间格式yyyy-MM-dd
        orderCreateTimeStart: '', //指定时间开始时间
        orderCreateTimeend: '', //指定时间结束时间
      },

3，然后写点击事件，对点击事件进行判断

   onclicksettime(e, name) {
      console.log('adsasda', name)
      if (e == null) {
        if (name == '1') {
          this.wheretime.firstBeginTime = ''
          this.wheretime.secondBeginTime = ''
        }
        if (name == '2') {
          this.wheretime.orderCreateTimeStart = ''
          this.wheretime.orderCreateTimeend = ''
        }
      } else {
        if (name == '1') {
          this.wheretime.firstBeginTime = e[0]
          this.wheretime.secondBeginTime = e[1]
        }
        if (name == '2') {
          this.wheretime.orderCreateTimeStart = e[0]
          this.wheretime.orderCreateTimeend = e[1]
        }
      }

      console.log(
        ' this.wheretime.orderCreateTimeStart',
        this.wheretime.orderCreateTimeStart
      )
      console.log(
        '  this.wheretime.orderCreateTimeStartStr',
        this.wheretime.orderCreateTimeend
      )
    },

最后打印出来的就是开始和结束时间了。

 

第二种，需要精确到时分秒的时间

 

1，先布局，我这边是form表单写的，我就用表单为例

 <el-date-picker :disabled="participateForm.time == 0 ? true : false"
  style="width: 358px;"   prefix-icon="el-icon-date"
  v-model="participateForm.Specified" @change="onclickordersettime"
  :picker-options="option"  type="datetimerange"
  range-separator="至"  start-placeholder="开始时间"
  end-placeholder="结束时间"  value-format="yyyy-MM-dd HH:mm:ss" />

2,然后在return里面自定义

  participateForm: {
   orderbeginTimeStr: '', //开始时间  格式yyyy-MM-dd HH-mm-ss
   orderendTimeStr: '', //结束时间 格式yyyy-MM-dd HH-mm-ss
   Specified: [], //指定时间
}

3，然后写点击事件就好了

onclickordersettime(e) {
      console.log(e)
      if (e == null) {
        this.participateForm.orderbeginTimeStr = ''
        this.participateForm.orderendTimeStr = ''
      } else {
        const startAt = new Date(e[0]).getTime()
        const startAts = new Date(e[1]).getTime()
        console.log(startAt, Date.now(), 'Date.now()')
        if (startAt < Date.now()) {
          const date = new Date()
          const min = date.getMinutes()
          let beginDate = date.setMinutes(min + 7)
          let strBeginDate = this.$options.filters['formatDate'](
            beginDate,
            'yyyy-MM-dd hh:mm:ss'
          )
          this.participateForm.orderbeginTimeStr = strBeginDate
        } else {
          this.participateForm.orderbeginTimeStr = this.$options.filters[
            'formatDate'
          ](startAt, 'yyyy-MM-dd hh:mm:ss')
        }

        if (startAt == startAts) {
          const dates = new Date()
          const mins = dates.getMinutes()
          let endDate = dates.setMinutes(mins + 1440)
          console.log(endDate, 'endDate')
          let strEndDate = this.$options.filters['formatDate'](
            endDate,
            'yyyy-MM-dd hh:mm:ss'
          )
          this.participateForm.orderendTimeStr = strEndDate
        } else {
          if (startAts < Date.now()) {
            const dates = new Date()
            const mins = dates.getMinutes()
            let endDate = dates.setMinutes(mins + 1440)
            let strEndDate = this.$options.filters['formatDate'](
              endDate,
              'yyyy-MM-dd hh:mm:ss'
            )
            this.participateForm.orderendTimeStr = strEndDate
          } else {
            this.participateForm.orderendTimeStr = this.$options.filters[
              'formatDate'
            ](startAts, 'yyyy-MM-dd hh:mm:ss')
          }
        }
        this.participateForm.Specified[0] = this.participateForm.orderbeginTimeStr
        this.participateForm.Specified[1] = this.participateForm.orderendTimeStr
      }
    },

 

 

好了，就这样子了。