elementUI修改el-date-picker默认时间

 HTML:

<el-date-picker
   v-model="dateValue"
   type="daterange"
   size="small"
   unlink-panels
   range-separator="至"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   :shortcuts="shortcuts">
</el-date-picker>

JS:

//放在页面的state中
shortcuts: [
        {
          text: "本周",
          value: () => {
            const end = new Date();
            const start = new Date();
            //周日算第一天,如果周日查询本周的话,天数是0,所有如果是0,默认设置为7,处理当前周
            const nows = start.getDay() || 7; 
            start.setTime(start.getTime() - 3600 * 1000 * 24 * (nows - 1));
            end.setTime(end.getTime() - 3600 * 1000 * 24 * (nows - 7));
            console.log(start, end, "end");
            return [start, end];
          },
        },
        {
          text: "本月",
          value: () => methods.getTime(),
        },
        {
          text: "上月",
          value: () => {
            const oDate = new Date();
            let year = oDate.getFullYear();
            let month = oDate.getMonth();
            let start, end;
            if (month == 0) {
              year--;
              start = new Date(year, 11, 1);
              end = new Date(year, 11, 31);
            } else {
              start = new Date(year, month - 1, 1);
              end = new Date(year, month, 0);
            }
            return [start, end];
          },
        },
      ],

处理本月的函数:

      // 获取本月时间段datePicker使用
      getTime() {
        const oDate = new Date();
        let year = oDate.getFullYear();
        let month = 0//oDate.getMonth();
        let start, end;
        if (month == 0) {
          year--;
          start = new Date(year, 0, 1);
          end = new Date(year, 12, 31);
        } else {
          start = new Date(year, month, 1);
          end = new Date(year, month   1, 0);
        }
        state.dateValue = [start, end];
        return [start, end];
      },

el-date-picker设置默认时间区间

需求

需要一进页面时,把日期选择器,默认展示为2012-01-01至当前日期-1天

即图:

代码和注释如下

2.1

<el-form-item label="时间周期:" prop="timeCycle" >
      <el-date-picker
         v-model="createForm.timeCycle"
         type="datetimerange" 
         :picker-options="pickerOptions" //快捷时间选择的函数
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         value-format="yyyy-MM-dd" //默认值为这种格式
       >
      </el-date-picker>
</el-form-item>

2.2

由于开始时间是固定的,所以需要在定义数据时定义好,结束时间不能不填,也不能是" ",也不能是不符合时间格式的,否则整个时间选择器都不会展示了

  data(){
     return {
        createForm: {
          timeCycle:["2012-01-01","2012-01-01"]
        }
     }
   }

2.3

在页面一加载时,在created函数里把结束时间算好,然后赋值到定义的timeCycle数组的第二项

created(){
      const end = new Date();//获取当前的日期
      end.setTime(end.getTime() - 3600 * 1000 * 24 )
      //计算,将当期日期-1天
      //此时得到的是中国标准时间,格式不是yyyy-MM-dd,需要用dateFormat这个函数转换下
      this.createForm.timeCycle[1]=this.dateFormat(end)
      //将转换完的正确格式的结束时间赋值到timeCycle数组的第二项
  }

2.4

时间格式的转换函数

中国标准时间,即,例如:Wed Oct 24 2018 20:00:00 GMT 0800

转换为:yyyy-MM-dd格式,即:2018-10-24

 methods:{
   dateFormat(dateData) {
      var date = new Date(dateData)
      var y = date.getFullYear()
      var m = date.getMonth()   1
      m = m < 10 ? ('0'   m) : m
      var d = date.getDate()
      d = d < 10 ? ('0'   d) : d
      const time = y   '-'   m   '-'   d
      return time
    }
 }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。 

Vue3 elementUI如何修改el-date-picker默认时间的更多相关文章

  1. vue3获取当前路由地址

    本文详细讲解了vue3获取当前路由地址的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 十分钟带你快速上手Vue3过渡动画

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于如何快速上手Vue3过渡动画的相关资料,需要的朋友可以参考下

  3. 简单设置el-date-picker的默认当前时间问题

    这篇文章主要介绍了简单设置el-date-picker的默认当前时间问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  4. 用vue3封装一个符合思维且简单实用的弹出层

    最近新项目中需要一个弹窗组件,所以我就做了一个,下面这篇文章主要给大家介绍了关于如何利用vue3封装一个符合思维且简单实用的弹出层,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  5. 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    这篇文章主要为大家介绍了使用Vite+Vue3+Vant全家桶快速构建项目步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  6. vue3中$attrs的变化与inheritAttrs的使用详解

    $attrs现在包括class和style属性。 也就是说在vue3中$listeners不存在了,vue2中$listeners是单独存在的,在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性,这篇文章主要介绍了vue3中$attrs的变化与inheritAttrs的使用 ,需要的朋友可以参考下

  7. vue3中proxy的基本用法说明

    这篇文章主要介绍了vue3中proxy的基本用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  8. elementui中使用el-tree控件懒加载和局部刷新

    这篇文章主要介绍了elementui中使用el-tree控件懒加载和局部刷新,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  9. 如何利用vue3实现一个俄罗斯方块

    俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  10. Vue3 携手 TypeScript 搭建完整项目结构

    TypeScript 是JS的一个超级,主要提供了类型系统和对ES6的支持,使用 TypeScript 可以增加代码的可读性和可维护性,在 react 和 vue 社区中也越来越多人开始使用TypeScript,这篇文章主要介绍了Vue3 携手 TypeScript 搭建完整项目结构,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部