iview 中日期组件 ( DatePicker ) 校验缺陷问题

最新推荐文章于 2025-03-12 18:59:55 发布

贰年级小明

最新推荐文章于 2025-03-12 18:59:55 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： iview 文章标签： iview

本文链接：https://blog.youkuaiyun.com/weixin_43735788/article/details/90474381

iview 专栏收录该内容

3 篇文章

订阅专栏

博客给出iview组件使用时的具体解决方案。假设组件可进行数据添加和编辑，只需在iview日期组件的rules校验时更改type属性，再用on-change事件重新获取数据，过程仅供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体解决方案如下

**
过程不是太详细，只做参考

假设该组件在使用时可进行数据的添加和编辑

<Button type="primary" @click="addDate">添加</Button>

<Button type="primary" @click="editDate">编辑</Button>

<Modal
	:title="addOrEditDate === true ? '新增' : '编辑'" 
    v-model="ModalShow"
    :mask-closable="false>
	<Form ref="mydate" :model="currentDate" :rules="rules">
            <FormItem label="期间" prop="date">
              <DatePicker v-model="currentDate.date" type="month" format="yyyy/MM" 
              	placeholder="请输入日期" clearable @on-change="dateChange"></DatePicker>
            </FormItem>
     </Form>
 <Modal>



data () {
	return {
		addOrEditDate : true, // 此功能暂不作处理
		ModalShow: false, // 此功能暂不作处理
		currentDate: { // 组件的日期数据
			date: ''
		}，
		rules: {
			date: [
			// 日期改变时的校验规则，在使用添加功能时，此时currentDate.date的值必须是空
	          { required: true, type: 'date', message: '日期不能为空', trigger: 'change' } 
	        ]
		}
	}
}



methods: {
	addDate () {}, // 添加功能，   点击添加按钮，此时 rules.date[0].type = 'date'
	
	editDate () {  // 编辑功能，   点击编辑按钮，此时 rules.date[0].type = 'string'
		// 编辑时我们要获取已有日期的默认值，
		
		由于iview提供的日期组件只能识别标准时间（例如：Sat Jun 01 2019 00:00:00 GMT+0800 (中国标准时间)），
		
		所以，我们拿取的默认值（例如：2019/06）,需要做转化以后iview日期组件才能识别
		
		this.currentDate.date= new Date(this.currentDate.date.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3')) 
	},
	
	dateChange (date) { // 检测日期组件的改变，重新给 currentDate.date 赋值
		this.currentDate.date = date
	}
}

大致过程就是这样，我们只需要把iview中日期组件的 rules 校验时把 type 属性做一下更改，然后数据用 on-change 事件重新获取即可