el-date-picker样式value-format=YYYY年MM月DD日
时间: 2023-11-17 17:02:02 浏览: 2314
el-date-picker样式value-format可以设置为YYYY年MM月DD日,只需要将value-format属性的值设置为'YYYY年MM月DD日'即可。例如:value-format='YYYY年MM月DD日'。这样设置后,选择日期后显示的日期格式就会变成YYYY年MM月DD日的形式。
相关问题
<el-form-item label="颁发日期" :rules="[{ required: true, message: '颁发日期不能为空' }]"> <el-date-picker v-model="formData.promulgateDate" value-format="yyyy-MM-dd" type="year" placeholder="选择年" :style="{ width: '33%' }" > </el-date-picker> </el-form-item> <el-form-item label="实施日期" :rules="[{ required: true, message: '实施日期不能为空' }]"> <el-date-picker v-model="formData.execDate" value-format="yyyy-MM-dd" type="year" placeholder="选择年" :style="{ width: '33%' }" :picker-options="expireTimeOption" > </el-date-picker> </el-form-item> <el-form-item label="失效日期" :rules="[{ required: true, message: '失效日期不能为空' }, { validator: (rule, value, callback) => checkExpiryDate(rule, value, callback, formData.promulgateDate), trigger: 'blur' }]"> <el-date-picker v-model="formData.expiryDate" value-format="yyyy-MM-dd" type="year" placeholder="选择年" :style="{ width: '33%' }" :picker-options="expiryDateOption"> </el-date-picker> </el-form-item>写下必填的校验规则
这段代码中,有三个表单项需要进行必填校验。规则如下:
1. 颁发日期:必填,不能为空。
2. 实施日期:必填,不能为空。
3. 失效日期:必填,不能为空,且需要进行日期有效性校验,即失效日期必须晚于颁发日期。其中,日期有效性校验的验证器为 checkExpiryDate() 方法,触发时机为失效日期控件的失焦事件(blur)。
<el-form-item label="发布时间" label-width="80px" prop="publishTime"> <el-date-picker style="width: 100%" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.publishTime" type="datetime" placeholder="选择发布时间"> </el-date-picker> </el-form-item>
这段代码是一个使用了 Element UI 框架的表单项组件,该表单项包含一个日期选择器组件,用于选择发布时间。`label` 属性设置该表单项的标签为 “发布时间”,`label-width` 属性设置标签的宽度为 80px。`prop` 属性设置该表单项对应的表单数据对象中的属性名为 `publishTime`。日期选择器组件的 `style` 属性设置宽度为 100%。`format` 属性设置日期时间的显示格式为 `yyyy-MM-dd HH:mm:ss`,`value-format` 属性设置 v-model 绑定的值的格式也为 `yyyy-MM-dd HH:mm:ss`。`v-model` 绑定了表单数据对象中的 `publishTime` 属性。`type` 属性设置为 `datetime`,表示该选择器是一个日期时间选择器。`placeholder` 属性设置选择器的占位符为 “选择发布时间”。
阅读全文