element 日期选不上问题!

tommyrunner
949 阅读2分钟

情况1:初始化值类型

<template>
<el-date-picker
    v-model="value"
    type="datetime"
    placeholder="选择日期时间">
  </el-date-picker>
</template>
<script>
export default {
data() {
  return {
    value: [],
},
};
</script>
  • 第一种原因是范围时间选择器使用的是数组类型，开发者有可能设置错误。
  • 第二种情况是初始化值的时候，可能是服务器传入或者其他方式初始化，导致数据格式不正确，此时时间选择器无法被选中。

情况2：设置的value-format属性不正确

<template>
<el-date-picker
    v-model="value"
    type="datetime"
    value-format="aaa"
    placeholder="选择日期时间">
  </el-date-picker>
</template>
<script>
export default {
data() {
  return {
    value: '',
},
};
</script>

当设置的 value-format 缺乏匹配合格字符时，用户可以进行选择，但只能返回当前月份的第一天。

接下来说下我出现的问题，和情况2类似，因为我在开发功能时涉及到多个项目开发，需要频繁在 Vue 2 和 Vue 3 的项目之间进行切换。由于 Element UI 和 Element Plus 相似，所以出现了这个问题：

<template>
<el-date-picker
    v-model="value"
    type="datetime"
    value-format="yyyy-MM-DD HH:mm:ss"
    placeholder="选择日期时间">
  </el-date-picker>
</template>
<script>
export default {
data() {
  return {
    value: '',
},
};
</script>

看这个例子是Vue2的项目,所使用的是Element UI,从代码程度看无错误体现，运行后发现无法正确选择日期，始终返回当前月份的第一天。

根据情况2排除问题:

从Element UI文档中看到 日期格式 中并不包含大写的 "DD"格式，因此导致匹配错误，出现情况2同样的问题。

于是从Element Plus文档中寻找，发现Element Plus的日期格式 是遵循day.js规范的，并且在day.js规范中是支持大写"DD"的格式的。

最后解决

<template>
<el-date-picker
    v-model="value"
    type="datetime"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择日期时间">
  </el-date-picker>
</template>
<script>
export default {
data() {
  return {
    value: '',
},
};
</script>

最后总结，Element UI和Element Plus两个库中的日期选择器的日期格式化规范存在差异。Element UI拥有一套独立的规范，而Element Plus则按照day.js的规范进行处理。通过对比，我们发现Element UI的时间规范中缺少了一些常用的格式，例如DD、YYYY等。因此，当我们实际进行开发时，需要根据具体情况找到相应的文档进行参考，以确保日期格式化操作的正确性。这样做可以避免在日期选择器使用过程中出现格式不兼容的问题，提高开发的效率和准确性。综上所述，开发者在使用Element UI和Element Plus的日期选择器时，需注意它们的日期格式化规范不一致，并查阅相应文档以做正确的开发。

avatar
文章
阅读
粉丝