iview - 日期选择控件datePicker格式
前言 iview日期选择控件少一天问题 在时间控件中明明选择的是2019-05-21,但是当通过vue的调试器查看的时候,竟然是这样的 写法如下<FormItem label="开始时间" prop...
·
前言
iview日期选择控件少一天问题
在时间控件中明明选择的是2019-05-21
,但是当通过vue的调试器查看的时候,竟然是这样的
写法如下
<FormItem label="开始时间" prop="startTime">
<DatePicker
type="datetime"
v-model="formData.startTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请输入开始时间"
:options="startTimeOptions"
@on-ok="startTimeChoose"></DatePicker>
</FormItem>
导致这样结果的原因是通过v-model来绑定的绑定后获取的时间叫utc
时间,
通过value
和@on-change
事件来绑定即可,(注意,用@on-change
来获取时间的时候,就不能加v-model
了,不然获取的时间还是老样子)
<FormItem label="开始时间" prop="startTime">
<DatePicker
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请输入开始时间"
:value="formData.startTime"
:options="startTimeOptions"
@on-ok="startTimeChoose"
@on-change="formData.startTime=$event"></DatePicker>
</FormItem>
常见date选择控件
<FormItem label="日期">
<DatePicker
format="yyyy-MM-dd"
type="date"
placeholder="请选择日期"
@on-change="condition.date=$event"></DatePicker>
</FormItem>
选取两个时间前后冲突常见规则
<template>
<div>
<Form ref="formRef" :model="formData" :rules="rules">
<FormItem label="开始时间" prop="startTime">
<DatePicker
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请输入开始时间"
:value="formData.startTime"
:options="startTimeOptions"
@on-ok="startTimeChoose"
@on-change="formData.startTime=$event"></DatePicker>
</FormItem>
<FormItem label="结束时间" prop="endTime">
<DatePicker
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请输入结束时间"
:value="formData.endTime"
:options="endTimeOptions"
@on-open-change="endTimeOpen"
@on-change="formData.endTime=$event"></DatePicker>
</FormItem>
</Form>
</div>
</template>
<script>
export default {
name: 'dataPicker',
data () {
return {
formData: {
startTime: '',
endTime: ''
},
startTimeOptions: {
disabledDate: date => {
return date && date.valueOf() < Date.now() - 86400000
}
},
endTimeOptions: {},
rules: {
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
}
}
},
watch: {
// 结束时间范围
'formData.startTime': function (val) {
this.endTimeOptions = {
disabledDate: date => {
return date && date.valueOf() < new Date(this.formData.startTime).getTime() + 86400000
}
}
}
},
methods: {
// 开始时间验证
startTimeChoose () {
if (new Date(this.formData.startTime) - new Date(this.formData.endTime) > 0) {
this.$Message.warning('开始时间早于结束数时间')
this.formData.startTime = ''
}
},
// 结束时间验证
endTimeOpen () {
if (!this.formData.startTime) {
this.$Message.warning('请先选择开始时间')
this.formData.endTime = ''
}
},
}
}
</script>
更多推荐
已为社区贡献16条内容
所有评论(0)