Vue3 elementUI 中 date-picker 使用过程遇到坑
1. 英文显示
<el-date-picker v-model="dateValue" type="date" placeholder="选择日期" > </el-date-picker>
解决方案:
引用 zhCn
<script> import zhCn from "element-plus/dist/locale/zh-cn"; export default { data() { return { locale: zhCn, dateValue: '', } } } </script>
config-provider 作为父标签
<el-config-provider :locale="locale"> <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" > </el-date-picker> </el-config-provider>
效果
2. format 与 value-format 无效
默认情况:
<el-config-provider :locale="locale"> <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" > </el-date-picker> </el-config-provider>
效果:
输入框
dateValue
格式化之后:
<el-config-provider :locale="locale"> <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker> </el-config-provider>
效果:
输入框
dateValue
肉眼可见,月份的格式化是对的即 MM,那我们就把其他两个也改成大写
<el-config-provider :locale="locale"> <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"> </el-date-picker> </el-config-provider>
效果:
dateValue
3. date-picker 时间范围
<el-config-provider :locale="locale"> <el-date-picker v-model="dateValues" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" > </el-date-picker> </el-config-provider>
如果是时间范围,v-model 要绑定一个数组类型变量。
export default { data() { return { locale: zhCn, dateValues: [], } } }
效果:
dateValues:
4. 小结
- 英文显示改成中文显示需要,引入 zhCn ,然后加个父标签 config-provider locale
locale
配置语言代码 - 在 element-plus 中的 date-picker,
format
与value-format
中的格式化字符都要用大写
- date-picker 单独选择一个时间,v-model 绑定一个
字符串(string)
,date-picker 选择一个时间范围,v-model 绑定一个数组([])
到此这篇关于Vue3 elementUI 中 date-picker 使用的坑的文章就介绍到这了,更多相关vue3 elementUI date-picker 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue中使用elementUI自定义校验及点击提交不生效问题解决办法
我们在项目中经常会用到ElementUI的表单验证,下面这篇文章主要给大家介绍了关于vue中使用elementUI自定义校验及点击提交不生效问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12Vue浏览器缓存sessionStorage+localStorage+Cookie区别解析
这篇文章主要介绍了Vue浏览器缓存sessionStorage+localStorage+Cookie区别解析,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
今天小编就为大家分享一篇vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论