Vue+Element Plus 获取当前时间

最新推荐文章于 2025-10-05 07:50:50 发布

原创最新推荐文章于 2025-10-05 07:50:50 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

工作中的问题同时被 3 个专栏收录

16 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

element Plus

5 篇文章

订阅专栏

本文记录在Vue项目中使用Element Plus组件显示当前时间的问题。由于组件对时间格式要求严格，错误地使用了`format="yyyy-MM-dd HH:mm"`导致问题，通过查阅官方文档发现正确格式。提醒开发者仔细阅读文档以避免类似问题。

业务需求：默认展示当前时间，找了很多博客，没弄出来，结果是因为组件上定义时间的规则不一样

如上组件上对于每一个出现的字段都有明确的定义，我一开始直接搜的技术博客，写成了format="yyyy-MM-dd HH:mm"，导致我一直在页面上达不到我想要的效果，最终还是翻了官方文档才找到原因，所以说，写代码一定要好好阅读文档，不然就像我一样浪费很多时间在这上面排查原因！！

上效果图：

上代码：

<el-date-picker v-model="auditData.Date" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间"></el-date-picker>

export default {
	data() {
		return {
			auditData:{Date:''},
		}
	},

    mounted() {
		this.getdatatime();// 默认显示为当天时间
    },

    methods：{
    // 正在督查的列表默认显示当前日期
            getdatatime(){
                // 格式化时间，获取当前时间的一个月后的时间值
                // var data = new Date();
                // var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 30);
                // 以上两行代码为关键代码，若想要返回一天后的时间，则可以将第二行代码更换为下面代码
                // var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000);
                // 若是想要返回值为当前时间，则上面两行代码可以直接修改为下面代码即可。

                // 返回值为当前时间
                const Da = new Date();
                const yy = Da.getFullYear();
                const mm = Da.getMonth() + 1;
                const dd = Da.getDate();
                const hh = Da.getHours();
                const mf = Da.getMinutes()< 10 ? "0" +Da.getMinutes() : Da.getMinutes();
                const ss = Da.getSeconds()< 10 ? "0" +Da.getSeconds() : Da.getSeconds();
                const nowDa = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss
                console.log(nowDa)
                this.auditData.Date = nowDa
            },
    }
}

参考：vue中在时间输入框中默认显示时间

以上就是利用element Plus 展示默认时间的方法，技术不难，难的是细心！！！