美文网首页
vue element DatePicker 日期选择器

vue element DatePicker 日期选择器

作者: 逸笛 | 来源:发表于2021-04-22 10:10 被阅读0次
    图片.png
    时间工具类:https://www.jianshu.com/p/32a5183a6b1d
        <div class="btns-dateRange">
              <el-radio-group v-model="timeFlag" size="small" @change="timeChange">
                <el-radio-button label="2">七天内</el-radio-button>
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="1">今日</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="value"
                @focus="focusChange"
                @change="allTimeChange"
                @blur="blurChange"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
    
    <script>
    import Vue from 'vue'
    import dateUtils from '..//ishuowww/Tpl/Public/utils/date'
    export default {
      name: '',
      data () {
        return {
          stime: '',
          etime: '',
          timeFlag: '2',
          value: ''
        }
      },
      created () {
        const date = new Date()
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
        this.stime = dateUtils.getGMT(date)
        this.getlists()
      },
      methods: {
        reset () {
          this.timeFlag = '2'
          // 时间置空
          this.value = ''
          this.stime = ''
          this.etime = ''
          this.getlists()
        },
    
    
        focusChange () {
          this.timeFlag = ''
        },
        blurChange () {
          this.timeFlag = '2'
        },
        allTimeChange (val) {
          if (val) {
            this.stime = dateUtils.getGMT(val[0])
            this.etime = dateUtils.getGMT(val[1])
          }
          // 清除
          if (val == null) {
            this.stime = ''
            this.etime = ''
          }
          this.getlists()
        },
        timeChange (st) {
          // 时间置空
          this.value = ''
          if (st === '1') {
            // 1 今日
            this.stime = dateUtils.getGMTDate(new Date())
          } else if (st === '2') {
            // 1 七天前日
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            this.stime = dateUtils.getGMT(date)
          } else {
            this.stime = ''
          }
          this.pg = 1
          this.getlists()
        },
        curChange (id) {
          this.pg = id
          this.getlists()
        },
        getlists () {
          this.$api.post(
            '/admintp/yunlists',
            {
              islock: this.islock,
              stime: this.stime,
              etime: this.etime,
              keywords: this.keywords,
              username: this.username,
              pg: this.pg
            },
            (res) => {
              if (res.status) {
                this.lists = res.data.files
                this.total = parseInt(res.data.total)
              } else {
                this.$notify.warning({
                  title: '错误',
                  message: res.msg
                })
              }
            }
          )
        }
      }
    }
    </script>
    
    

    相关文章

      网友评论

          本文标题:vue element DatePicker 日期选择器

          本文链接:https://www.haomeiwen.com/subject/nljxrltx.html