【vue】【date-picker】时间范围模板 获取开始时间和结束时间
使用elementUI的日期选择器,有一个选择日期范围的模板。也就是使用一个选择器但是包括了开始时间和结束时间,那么如何获取到开始时间和结束时间?elementUI组件库连接–需要自取1、首先,在el-date中,需要注意v-model设置,themetime是自定义的名字,随便写一个就行<el-date-pickerv-model="ruleForm.themetime"type="dat
·
使用elementUI的日期选择器,有一个选择日期范围的模板。也就是使用一个选择器但是包括了开始时间和结束时间,那么如何获取到开始时间和结束时间?
1、首先,在el-date中,需要注意v-model设置,themetime是自定义的名字,随便写一个就行
<el-date-picker
v-model="ruleForm.themetime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="float: left"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
- 上面第二行一定注意
ruleForm.
前缀,因为后面使用的时候跟其他的表单内的组件一样,都是用这个做前缀,所以不能漏掉(当然,如果你没有使用表单,直接放到vue中的,可以不用这个前缀) - 另外需要注意,最后两行是格式化的功能:format是在前端页面中的显示格式,value-format是传参到后端的时候的样子,这两个可以一样,也可以设置成不一样的,都可以
2、其次,需要在data的return中写v-model的值。相当于定义变量
data () {
return {
// 我这里使用的是表单ruleForm,将选择器放在表单里了,所以这里多了ruleForm,
// 如果不使用表单,直接在return中写themetime: []
// 需要注意,是数组,不能写成 ''
ruleForm: {
themetime: []
},
// 向后台传入的时间参数,将前台的date分离成开始时间和结束时间。
//这里这个time可以定义,也可以不定义。
// 定义的好处是下面多次使用的时候直接取用time就行,
// 不定义的话每次取用this.ruleForm.themetime[] 也行
time: {
starttime: '',
endtime: ''
}
}
},
3、在methods中使用的时候,应该用数组themetime[],下标0 表示开始时间,下标1 表示结束时间
更多推荐
已为社区贡献2条内容
所有评论(0)