el-date-picker中使用 :shortcuts="shortcuts"时间乱码2024-10-21T06:26:23.886Z

在`el-date-picker`组件中，`:shortcuts`属性用于自定义日期选择器的快捷键。如果遇到时间显示为乱码 "2024-10-21T06:26:23.886Z" 的情况，可能是由于字符编码设置不一致导致的。这个时间字符串看起来像是ISO 8601 格式，而默认情况下，`el-date-picker`可能是在本地环境中展示，并按照本地日期格式解析。

解决这个问题，你可以尝试以下几个步骤：

1. **检查字符集**：确认日期选择器的显示区域字符集是否与实际输入的时间格式相匹配。如果是国际化环境，确保选择了正确的语言和地区格式。

2. **调整日期格式**：可以在`v-model`绑定的对象中明确指定日期时间格式，例如使用`format`选项，将其设置为你希望看到的格式，如："yyyy-MM-dd HH:mm:ss"。

3. **设置全局时间格式**：如果你在应用中有多处地方使用`el-date-picker`，考虑统一设置日期和时间的全局格式，避免因环境差异引发的问题。

<el-date-picker
  v-model="dateTime"
  :shortcuts="shortcuts"
  value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>

如果以上都没有解决问题，你还可以

相关问题

el-date-picker shortcuts用法

el-date-picker的shortcuts属性用于配置快捷项，以便用户可以快速选择日期。在Vue 2.x版本中，可以通过以下步骤配置shortcuts：

1. 在模板中，将shortcuts绑定到pickerOptions对象上：

<template>
  <div class="block">
    <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
  </div>
</template>

2. 在脚本中，定义pickerOptions对象，并在其中配置shortcuts：

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          { text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } },
          { text: '昨天', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit('pick', date); } },
          { text: '一周前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', date); } }
        ]
      },
      value2: ''
    }
  }
};
</script>

这样，el-date-picker组件就会显示配置的快捷项。