前端UI框架-iview使用心得

最新推荐文章于 2024-03-07 22:02:11 发布

DQ1005

最新推荐文章于 2024-03-07 22:02:11 发布

阅读量2.8k

点赞数

分类专栏： UI框架

本文链接：https://blog.csdn.net/dq1005/article/details/90172111

版权

本文分享了关于iview UI框架中date-picker组件在type='daterange'和'datetime'时的验证方法。针对daterange类型，强调使用value而非v-model以避免数据验证问题，并指出需添加on-change和on-clear事件处理。对于datetime类型，可以通过添加pattern进行验证。

摘要由CSDN通过智能技术生成

1.date-picker 为 type="daterange"的验证解决方法

<FormItem label="变更起止时间：" prop="modifyTimes">
           <DatePicker
                        :value="form.modifyTimes"
                        format="yyyy-MM-dd"
                        type="daterange"
                        placement="bottom-end"
                        placeholder="请选择起止时间"
                        class="am-datepicker"
                        @on-change="getModifyTimes">
            </DatePicker>
</FormItem>

modifyTimes: [{
    type: 'array',
    required: true,
    fields: {
        0: {type: 'date', required: true, message: '请选择起止日期'},
        1: {type: 'date', required: true, message: '请选择起止日期'}
    }
}],

<!-- format="yyyy/MM/dd" -->
<!-- //type:date  注意当设置了format="yyyy/MM/dd"格式时附上type:date会报错 -->
<!-- 默认格式为：format="yyyy-MM-dd" -->
<!-- 如果报错就将fields中的type: 'date'字段删除掉-->

https://blog.csdn.net/six66667/article/details/83414855

<!-- 条件选择弹框 -->
    <Modal
        :title="modalTitle" 
        :z-index='1000'
        :width="630"
        v-model="chooseModal.modalVisible" 
        >
        <div>
            <Form ref="formDynamic"  
                inline
                :label-width="125"  
                :model="formDynamic"