zoukankan      html  css  js  c++  java
  • 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=" 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
          }
        },

    好了,就这样子了。

  • 相关阅读:
    EF Core 打印日志
    生成各种开源挂件的网址
    .NET Core 原生 Aop,不依赖任何第三方
    .NET Core + Castle.DynamicProxy 拦截
    EF Core 审计日志
    Gitee 接口大全
    VS 批量新增文件头
    Linq 完全指南
    swagger转word
    大型网站架构
  • 原文地址:https://www.cnblogs.com/lovebear123/p/14653254.html
Copyright © 2011-2022 走看看