el-date-picker禁用默认选中当前时间的配置方法

el-date-picker选择不能默认选中当前时间

本文将详细说明如何配置Element UI中的el-date-picker组件，使其在选择时不默认显示当前时间。我们将涵盖具体的操作步骤、命令示例及注意事项。

操作步骤

1. 首先，确保项目中已安装Element UI库。
2. 在组件中引入el-date-picker。
3. 通过设置属性值，禁用默认选中当前时间。

命令示例

import { DatePicker } from 'element-ui'

export default {
    components: {
        DatePicker
    },
    data() {
        return {
            value: ''
        }
    }
}

在模板中使用el-date-picker组件，并设置value属性为空，如下：

<el-date-picker
    v-model="value"
    type="date"
    placeholder="选择日期"
    value-format="yyyy-MM-dd"
    :default-value="null"
/>

解释

• v-model：绑定数据，但不影响默认选中行为。
• default-value：设置为null或空值，禁止默认选中当前时间。
• value-format：定义日期格式，确保与后端交互时格式统一。

注意事项

1. 如果直接使用空字符串''作为默认值，部分浏览器可能仍会默认选中当前时间，建议使用null。
2. 确保Element UI版本支持该属性配置，早期版本可能需要额外hack。

实用技巧

• 结合使用clearable属性，允许用户清空默认值并重新选择。
• 在服务端时间与客户端时间存在时差时，通过前端设置默认值可能不准确，建议在服务端返回初始值。

完整示例

<template>
    <el-date-picker
        v-model="value"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        :default-value="null"
        clearable
    />
</template>

<script>
import { DatePicker } from 'element-ui'

export default {
    components: {
        DatePicker
    },
    data() {
        return {
            value: ''
        }
    }
}
</script>