当前位置: 首页 > news >正文

el-date-picker设置默认当前日期

HTMl部分: 

<el-form-item label="拍摄时间:"><el-date-pickerv-model="searchData.filmingTimeRange"type="daterange"align="right"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"value-format="yyyy-MM-dd"/>
</el-form-item>

JS部分:

searchData: {pageNum: 1,pageSize: 10,filmingTimeRange: null,dwName: null,qyName: null
},mounted() {this.getNowDate()
},methods:{getNowDate() {var now = new Date()var year = now.getFullYear()var month = now.getMonth()var date = now.getDate()month = month + 1month = month.toString().padStart(2, '0')  //指定长度为2,不足2的话,从开始填充字符串0date = date.toString().padStart(2, '0')var defaultDate = `${year}-${month}-${date}`this.$set(this.searchData, 'filmingTimeRange', [defaultDate, defaultDate])},
}

可写成工具类,以供其他页面显示:

utils文件夹下getNowDateRange.js文件代码:

// 获取当前日期范围
export function getNowDate() {var now = new Date()var year = now.getFullYear()var month = now.getMonth()var date = now.getDate()month = month + 1month = month.toString().padStart(2, '0')date = date.toString().padStart(2, '0')var defaultDate = `${year}-${month}-${date}`return defaultDate
}
import { getNowDate } from '@/utils/getNowDateRange'data(){return{searchData: {pageNum: 1,pageSize: 10,filmingTimeRange: [getNowDate(), getNowDate()],dwName: null,qyName: null},}
}

也可使用MomentJS函数

import moment from 'moment'searchData: {pageNum: 1,pageSize: 10,filmingTimeRange: [moment().locale('zh-cn').format('yyyy-MM-DD'), moment().locale('zh-cn').format('yyyy-MM-DD')],dwName: null,qyName: null},

http://www.lryc.cn/news/116185.html

相关文章:

  • vue中使用this.$refs获取不到子组件的方法,属性方法都为undefined的解决方法
  • Linux命令200例:df用于显示文件系统的磁盘空间使用情况
  • Service not registered 异常导致手机重启分析
  • 深度解读|一站式ABI平台 Smartbi Insight V11 能力再升级
  • vConsole手机调试模式uniapp和原生h5
  • Flutter Dart语言(05)异步
  • 滇医通微信小程序分析笔记
  • IoTDB在springboot2中的(二) 查询
  • SpringBoot 底层机制分析【Tomcat 启动+Spring 容器初始化+Tomcat 如何关联Spring 容器】【下】
  • NLP(六十五)LangChain中的重连(retry)机制
  • C字符串与C++ string 类:用法万字详解(上)
  • async/await函数需要trycatch吗?
  • Jenkins集成appium自动化测试(Windows篇)
  • MongoDB:切换log日志文件
  • 代码随想录第三十五天
  • 块、行内块水平垂直居中
  • Mybatis引出的一系列问题-动态 SQL
  • Docker学习之构建Base Image
  • SFM(Structure from Motion)和NeRF(Neural Radiance Fields)
  • [Vue] Vue2和Vue3的生命周期函数
  • springboot集成分布式任务调度系统xxl-job(调度器和执行器)
  • 11_Vue3中的新的组件
  • 详解推送Git分支时发生的 cannot lock ref 错误
  • [国产MCU]-BL602开发实例-PWM
  • 【JMeter】 使用Synchronizing Timer设置请求集合点,实现绝对并发
  • 无法对watchdog.sys等系统文件删除,弯道修复,这里解决办法很简单
  • ClickHouse(九):Clickhouse表引擎 - Log系列表引擎
  • 3.1 计算机网络和网络设备
  • 值得中国人民大学与加拿大女王大学金融硕士中的金融人观看的五部电影
  • 【数据库】Redis可以替代Mysql吗