element ui日期组件设置默认时间
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
对日期进行了预处理(将起始的默认时间设置为当前时间,结束时间的默认时间设置为往一个月后),即使是点击了时间也不会报错
运行图效果
vue文件
<template>
<div>
<label>本月月初时间</label>
<el-date-picker
v-model="startTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
style="width: 200px"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
<label>当前时间</label>
<!-- 如果我们给其中的一个日期设置了默认值,那么就尽量不要再去给他使用value-format了,不然就会报错,因为他是string类型,我们可以在发起请求的时候将数据转化为后端想要的数据传过去,例子如下 -->
<el-date-picker
v-model="endTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
style="width: 200px"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
<!-- 获取当前时间的一个月后的时间值 -->
<label>一个月后时间</label>
<el-date-picker
v-model="nextTime"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
style="width: 200px"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
<el-button @click="find">查询</el-button>
</div>
</template>
<script>
export default {
data() {
return {
startTime: "",
endTime: "",
nextTime: "",
}
},
methods: {
getStartTime() {
// 获取其当前月的第一天
var data = new Date()
var Da = new Date(data.getTime())
var y = Da.getFullYear()
var m = Da.getMonth() + 1
m = m < 10 ? "0" + m : m
return y + "-" + m + "-" + "01" + " " + "00" + ":" + "00" + ":" + "00"
},
getEndTime() {
var data = new Date()
var Da = new Date(data.getTime())
var y = Da.getFullYear()
var m = Da.getMonth() + 1
var d = Da.getDate()
var H = Da.getHours()
var mm = Da.getMinutes()
var ss = Da.getSeconds()
m = m < 10 ? "0" + m : m
d = d < 10 ? "0" + d : d
H = H < 10 ? "0" + H : H
return y + "-" + m + "-" + d + " " + H + ":" + mm + ":" + ss
},
getnextTime() {
var data = new Date()
var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 30)
var y = Da.getFullYear()
var m = Da.getMonth() + 1
var d = Da.getDate()
var H = Da.getHours()
var mm = Da.getMinutes()
var ss = Da.getSeconds()
m = m < 10 ? "0" + m : m
d = d < 10 ? "0" + d : d
H = H < 10 ? "0" + H : H
return y + "-" + m + "-" + d + " " + H + ":" + mm + ":" + ss
},
find() {
console.log(this.startTime, this.endTime, this.nextTime)
},
},
mounted() {
var vm = this
vm.startTime = vm.getStartTime()
vm.endTime = vm.getEndTime()
vm.nextTime = vm.getnextTime()
},
}
</script>
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
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 8 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)