Element UI中el-date-picker组件默认选中当前日期的实现方法

el-date-picker 是 Element UI 中非常常用的日期选择组件。在新增表单、查询条件、预约日期、业务时间等场景中，经常需要让日期选择器打开后默认显示并选中“今天”。如果没有设置默认值，组件通常会保持空白状态，用户还需要手动选择日期。

实现这个需求的关键并不在 el-date-picker 本身提供了一个“默认今天”的特殊属性，而是通过 v-model 为组件绑定一个初始日期值。只要绑定的数据在组件加载时已经设置为当前日期，日期选择器就会自动选中当天。

一、基本实现方式

最简单的做法是在 Vue 的 data 中使用 new Date() 初始化日期变量。

HTML

  v-model="date"
  type="date"
  placeholder="选择日期">

对应的 Vue 代码：

JavaScript
export default {
  data() {
    return {
      date: new Date()
    }
  }
}

这样页面加载之后，el-date-picker 就会默认选中当前日期。

例如当前日期是 2026 年 8 月 29 日，组件显示的日期就是：

2026-08-29

这种方式代码非常简单，也是最推荐的实现方案。

二、完整示例

如果项目使用的是 Element UI 2.x，可以直接按照下面的方式实现：

HTML

  

    
      v-model="selectedDate"
      type="date"
      placeholder="选择日期"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd">
    

    
当前选择日期：{{ selectedDate }}
  



export default {
  data() {
    return {
      selectedDate: this.getCurrentDate()
    }
  },
  methods: {
    getCurrentDate() {
      const date = new Date()
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')

      return `${year}-${month}-${day}`
    }
  }
}

这里需要特别注意 value-format。

设置：

HTML
value-format="yyyy-MM-dd"

之后，v-model 获取到的就是类似：

2026-08-29

这样的字符串，而不是 JavaScript 的 Date 对象。

因此，初始化值也应该保持相同的数据类型。

三、直接使用 new Date() 的情况

如果没有设置 value-format，可以直接使用：

JavaScript
data() {
  return {
    selectedDate: new Date()
  }
}

例如：

HTML

  v-model="selectedDate"
  type="date"
  placeholder="请选择日期">

这是最简单的写法。

需要注意的是，此时：

JavaScript
selectedDate

实际保存的是一个 Date 对象。

可以通过：

JavaScript
console.log(this.selectedDate)

查看数据类型。

通常会得到类似：

Sat Aug 29 2026 ...

如果后续需要向后端提交日期字符串，就需要进行格式转换，或者直接使用 value-format。

四、使用 value-format 后如何设置默认日期

实际项目中，更推荐使用 value-format，尤其是表单需要提交给后端接口时。

例如：

HTML

  v-model="form.date"
  type="date"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
  placeholder="请选择日期">

JavaScript：

JavaScript
export default {
  data() {
    return {
      form: {
        date: this.formatDate(new Date())
      }
    }
  },

  methods: {
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')

      return `${year}-${month}-${day}`
    }
  }
}

此时：

JavaScript
this.form.date

得到的是：

2026-08-29

而不是 Date 对象。

这种设计对于接口参数处理更加直观。

五、为什么月份需要加 1

手动格式化日期时，很容易出现一个常见问题：

JavaScript
date.getMonth()

返回的月份范围是：

0 ~ 11

其中：

0 = 1月
1 = 2月
...
11 = 12月

所以实际月份需要写成：

JavaScript
date.getMonth() + 1

例如：

JavaScript
const month = String(date.getMonth() + 1).padStart(2, '0')

如果直接使用：

JavaScript
date.getMonth()

那么 8 月最终可能被错误地处理成：

07

这也是开发过程中日期默认值出现“少一个月”问题的常见原因。

六、为什么推荐使用 padStart

日期和月份在传递给后端时，通常需要保持两位格式。

例如希望得到：

2026-08-09

而不是：

2026-8-9

可以使用：

JavaScript
String(month).padStart(2, '0')

完整写法：

JavaScript
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')

最终得到标准的：

yyyy-MM-dd

形式。

七、使用计算属性生成当前日期

如果希望代码更加简洁，也可以通过计算属性生成日期。

例如：

HTML

  v-model="selectedDate"
  type="date"
  value-format="yyyy-MM-dd">

JavaScript
export default {
  data() {
    return {
      selectedDate: ''
    }
  },

  created() {
    this.selectedDate = this.currentDate
  },

  computed: {
    currentDate() {
      const date = new Date()

      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')

      return `${year}-${month}-${day}`
    }
  }
}

不过，如果日期只需要初始化一次，没有必要为了一个默认值专门增加计算属性。直接在 data 中初始化通常更加简单。

八、表单中的默认当前日期

实际开发中，el-date-picker 往往会放在 el-form 中。

例如：

HTML
 :model="form">
   label="日期">
    
      v-model="form.date"
      type="date"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      placeholder="请选择日期">
    
  

对应：

JavaScript
export default {
  data() {
    return {
      form: {
        date: this.getToday()
      }
    }
  },

  methods: {
    getToday() {
      const date = new Date()

      return [
        date.getFullYear(),
        String(date.getMonth() + 1).padStart(2, '0'),
        String(date.getDate()).padStart(2, '0')
      ].join('-')
    }
  }
}

这样新增数据时，日期字段自动填充当天。

九、编辑数据时不要盲目覆盖原日期

新增表单和编辑表单的处理方式有所不同。

新增数据时，可以直接：

JavaScript
this.form.date = this.getToday()

但是编辑已有数据时，如果接口已经返回日期，就不能每次进入页面都强制设置成今天。

错误示例：

JavaScript
created() {
  this.form.date = this.getToday()
  this.loadData()
}

如果 loadData() 返回的是历史日期，可能会出现先显示今天、随后又被接口数据覆盖的情况。

更合理的方式是区分新增和编辑：

JavaScript
if (this.isEdit) {
  this.loadData()
} else {
  this.form.date = this.getToday()
}

这样可以保证：

• 新增记录默认选择今天

• 编辑记录保留原来的日期

• 不会因为初始化逻辑覆盖已有数据

十、接口返回日期时的类型问题

这是 el-date-picker 默认日期设置中比较容易踩坑的地方。

假设组件设置了：

HTML
value-format="yyyy-MM-dd"

那么：

JavaScript
selectedDate = '2026-08-29'

是合理的。

但如果没有设置 value-format：

HTML

  v-model="selectedDate"
  type="date">

则更适合使用：

JavaScript
selectedDate = new Date()

而不是：

JavaScript
selectedDate = '2026-08-29'

也就是说，初始化数据的类型最好与 el-date-picker 当前配置保持一致。

可以简单理解为：

十一、默认当前日期和默认显示当前日期并不是一回事

有些开发需求实际上不是“默认选中今天”，而是“打开日期面板时显示今天所在月份”。

这两个概念需要区分。

例如：

JavaScript
selectedDate: null

意味着没有选择任何日期。

即使希望日期面板打开时定位到当前月份，也不一定需要让 v-model 绑定今天。

而如果设置：

JavaScript
selectedDate: new Date()

则代表已经选择了当前日期。

因此：

默认显示今天和默认选中今天是两个不同需求。

如果业务要求表单提交时必须有当天日期，应直接设置 v-model 的初始值。

十二、日期时间选择器默认当前时间

如果使用的不是：

HTML
type="date"

而是：

HTML
type="datetime"

同样可以使用：

JavaScript
selectedDate: new Date()

例如：

HTML

  v-model="selectedDate"
  type="datetime"
  placeholder="选择日期时间">

JavaScript
data() {
  return {
    selectedDate: new Date()
  }
}

这样默认值就是当前日期和时间。

如果使用字符串格式：

HTML

  v-model="selectedDate"
  type="datetime"
  value-format="yyyy-MM-dd HH:mm:ss">

则需要保证默认字符串符合指定格式。

十三、使用第三方日期库时的处理方式

如果项目已经使用 Day.js、Moment.js 等日期工具库，也可以直接生成默认日期。

例如使用 Moment：

JavaScript
import moment from 'moment'

export default {
  data() {
    return {
      selectedDate: moment().format('YYYY-MM-DD')
    }
  }
}

组件：

HTML

  v-model="selectedDate"
  type="date"
  value-format="yyyy-MM-dd">

不过，如果项目本身没有使用日期库，仅仅为了设置一个默认日期再引入额外依赖，通常没有必要。

原生 JavaScript 的 Date 已经足够完成这个需求。

十四、常见错误及排查方法

1. v-model 没有初始化

例如：

JavaScript
data() {
  return {
    selectedDate: ''
  }
}

此时组件自然不会默认选中今天。

可以改成：

JavaScript
selectedDate: new Date()

或者在使用 value-format 时：

JavaScript
selectedDate: '2026-08-29'

2. Date 对象和字符串格式混用

例如：

HTML

  v-model="selectedDate"
  type="date"
  value-format="yyyy-MM-dd">

却设置：

JavaScript
selectedDate: new Date()

这种情况下容易产生数据类型不一致的问题。

更合适的是：

JavaScript
selectedDate: '2026-08-29'

3. value-format 与实际日期格式不一致

例如组件要求：

HTML
value-format="yyyy-MM-dd"

但传入：

2026/08/29

就可能无法正常回显。

应该统一成：

2026-08-29

4. 使用接口数据覆盖默认值

如果页面初始化时设置了：

JavaScript
selectedDate: this.getToday()

但接口请求完成后又执行：

JavaScript
this.selectedDate = response.data.date

最终显示的自然是接口日期，而不是今天。

这种情况下需要根据新增、编辑等业务场景决定最终值。

十五、推荐的通用写法

对于普通的日期选择场景，可以采用下面这种实现：

HTML

  v-model="form.date"
  type="date"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
  placeholder="请选择日期">

JavaScript
export default {
  data() {
    return {
      form: {
        date: this.getToday()
      }
    }
  },

  methods: {
    getToday() {
      const now = new Date()

      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')

      return `${year}-${month}-${day}`
    }
  }
}

这种写法的优点是数据类型明确，日期格式统一，并且可以直接将日期字符串用于接口参数。

如果没有接口格式要求，也不需要字符串处理，则可以进一步简化：

JavaScript
data() {
  return {
    form: {
      date: new Date()
    }
  }
}

配合：

HTML

  v-model="form.date"
  type="date">

即可完成默认选中当前日期。

对于 Element UI 的 el-date-picker，实现默认选中当前日期的核心就是正确初始化 v-model。如果使用 value-format，需要特别注意字符串格式与组件配置保持一致；如果不使用 value-format，直接采用 new Date() 通常最简单。实际项目还应根据新增、编辑、接口回显等场景控制默认值，避免初始化逻辑意外覆盖已有日期。