使用element UI的日期选择器时，默认显示当天日期。

最新推荐文章于 2024-07-07 16:58:33 发布

原创最新推荐文章于 2024-07-07 16:58:33 发布 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#日期选择器默认显示当天日期

前端小知识点专栏收录该内容

69 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Element UI的日期选择器组件，并通过自定义方法设置默认显示为当前日期。通过获取当前日期并格式化为指定格式，再利用Vue的响应式属性将日期设置为日期选择器的默认值。

需求：输入框中要把当天日期显示在输入框中

<el-form-item label="交易数据">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="searchFormField.date"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
</el-form-item>

 methods: {
    getNowTime() {
       var now = new Date();
       var year = now.getFullYear(); //得到年份
       var month = now.getMonth(); //得到月份
       var date = now.getDate(); //得到日期
       month = month + 1;
       month = month.toString().padStart(2, "0");
       date = date.toString().padStart(2, "0");
       var defaultDate = `${year}-${month}-${date}`;
       this.$set(this.searchFormField, "date", defaultDate);
   },
 }