使用element UI的日期选择器,默认显示当天日期及7天前日期
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
方法一 ( 采用选择器 type= datetimerange 默认获取内容为时间戳 )
<template>
<div class="machineApp">
<el-date-picker
v-model="formInline.value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
/>
</div>
</template>
<script>
export default {
data() {
return {
formInline: {
value1: this.getDateTime() //methods优先级高于data (props==>methods==>data==>computed==>watch)
}
}
},
methods: {
getDateTime() {
return [new Date(new Date().getTime() - 3600 * 1000 * 24 * 7).getTime(), new Date().getTime()]
}
}
}
</script>
方法二 ( 采用选择器 type= daterange 默认获取内容为 yyyy-MM-dd hh:mm:ss 例如:2022-07-18 07:59:29 )
<template>
<div class="machineApp">
<el-form :inline="true"
:model="formInline"
class="demo-form-inline">
<el-form-item label="审批人">
<el-date-picker v-model="formInline.value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
formInline: {
value1: []
}
}
},
created() {
this.formInline.value1 = this.getNowTime()
},
methods: {
//初始默认执行(重点)
getNowTime() {
const start = new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
.toISOString()
.replace('T', ' ')
.split('.')[0] //默认开始时间7天前
const end = new Date(new Date().getTime() - 3600 * 1000 * 24)
.toISOString()
.replace('T', ' ')
.split('.')[0]//默认结束时间1天前
console.log([start, end])
return [start, end]
}
}
}
</script>
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)