【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期

简介: 【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期

为了方便用户体验,上头要求日期选择应该给一个默认的日期,查了查iview的官网,发现没有写,就自己找了一个办法

代码

html

<DatePicker class="dpt_font" v-model="meetingDate.meetingDate" format="yyyy/MM/dd" type="date" :options="options" placeholder="选择时间" style="width: 200px" :value="meetingDate.meetingDate"></DatePicker>

js

meetingDate:{
 meetingTime: "",
 }

钩子函数

 mounted() {
     
    const myDate = new Date();
    const year = myDate.getFullYear(); // 获取当前年份
    const month = myDate.getMonth() + 1; // 获取当前月份(0-11,0代表1月所以要加1);
    const day = myDate.getDate(); // 获取当前日(1-31)
    // 日期格式:2019/07/29 - 2019/07/29
    this.meetingDate.meetingDate = `${year}/${month}/${day} - ${year}/${month}/${day}`;
  
      this.load();
    },

效果

每次进入该页面显示效果

成功

目录
相关文章
|
1天前
|
JavaScript
Vue的小知识点
Vue的小知识点
7 2
|
1天前
|
JavaScript Apache
Vue升级及版本不匹配解决_Vue packages version mismatch:
Vue升级及版本不匹配解决_Vue packages version mismatch:
7 1
|
1天前
|
JavaScript 定位技术
BIGEMAP地图VUE中引入
BIGEMAP地图VUE中引入
3 0
BIGEMAP地图VUE中引入
|
1天前
|
JavaScript
vue点击按钮复制文字到粘贴板
vue点击按钮复制文字到粘贴板
6 0
|
1天前
|
JavaScript 定位技术 开发者
vue项目使用腾讯地图获取定位
vue项目使用腾讯地图获取定位
4 0
|
1天前
|
JavaScript 开发者
如何新建一个vue+vant移动端项目
如何新建一个vue+vant移动端项目
6 0
|
5天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
10天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
71 7
使用 Vue CLI 脚手架生成 Vue 项目
|
1天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
12 6