vue element DatePicker 日期选择器

2021-04-22  本文已影响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>

上一篇下一篇

猜你喜欢

热点阅读