Easyui写一个自定义的日期时间选择器

最新推荐文章于 2024-08-08 08:06:19 发布

前热火球员LeBron James

最新推荐文章于 2024-08-08 08:06:19 发布

阅读量935

点赞数

分类专栏： Vue.js 前端

本文链接：https://blog.csdn.net/qq_34663267/article/details/103862813

版权

Vue.js 同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

前端

28 篇文章 0 订阅

订阅专栏

一、需求：
左边下拉选择器，选（自定义）使用右面时间进行选择，然后下面是快速获取时间；选（最近一周、最近一个月、最近三个月，最近半年、最近一年）快速定位时间，注意此时右面时间选择器置灰，不能选。
在这里插入图片描述
二、使用模块：
Vue EasyUI插件，安装引入配置：EasyUI
三、具体实现：
1.首先用一个element选择器显示时间下拉控件，结合easyui：

        <div class="time-range">
          <el-select v-model="timePeriodValue" class="time">
            <el-option v-for="item in timePeriod"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
          <div style="display: inline-block; width: 16px"></div>
          <DateBox inputId="d2" v-model="startDate" style="width: 150px" format="yyyy-MM-dd" :disabled="timePeriodValue !== 'selfdefine'"></DateBox>
          <div style="display: inline-block; width: 19px">→</div>
          <DateBox inputId="d2" v-model="endDate" style="width: 150px;" format="yyyy-MM-dd" :disabled="timePeriodValue !== 'selfdefine'"></DateBox>
          <button class='search' @click="searchCpu()"></button>
        </div>

2.通过watch实时监听timePeriodValue值，从而通过get_time()方法给startDate赋我们选择的时间值：

    watch: {
      timePeriodValue: function (newTime, oldTime) {
        this.startDate=this.get_time(newTime)
      }
    }

3.通过get_time()方法根据时间节点val计算我们想要的时间格式，searchCpu()为点击搜索得到的值

    methods: {
      searchCpu: function() {
        console.log("开始时间 "+this.startDate)
        console.log("结束时间 "+this.endDate)
      },
      get_time(val) {
        let start = new Date();
        this.endDate = new Date();
        switch (val) {
            case "lastmonth":
                return new Date(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30));
            case "lastthreemonth":
                return new Date(start.setTime(start.getTime() - 3600 * 1000 * 24 * 90));
            case "lasthalfyear":
                return new Date(start.setTime(start.getTime() - 3600 * 1000 * 24 * 180));
            case "lastyear":
                return new Date(start.setTime(start.getTime() - 3600 * 1000 * 24 * 365));
            default:
                return new Date(start.setTime(start.getTime() - 3600 * 1000 * 24 * 7));
        }
      }
    },

四、最终效果：
在这里插入图片描述
五、补充：
第四部得到的时间不是我们想要的时间格式，我们发给后端接口数据格式是：2019-07-11 09:47:35

/**
* description: 格式化时间
* create_time: 2020-1-7
* function: FormatTime() p()
* 参数格式: Tue Jan 07 2020 11:20:38 GMT+0800 (中国标准时间)
* 返回值格式: 2020-01-07 11:20:38
*/
export function FormatTime(time) {
  const d = new Date(time)
  const resDate = d.getFullYear() + '-' + p((d.getMonth() + 1)) + '-' + p(d.getDate())
  const resTime = p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds())
  return resDate+" "+resTime;
}

function p(s) {
  return s < 10 ? '0' + s : s
}

这样用的话直接在自己vue模块里面import {FormatTime} from ‘’;引出直接用就可以了，注意别忘了带参数。