Vue+Element Plus gets the current time

Business requirements: The current time is displayed by default. I found a lot of blogs, but I couldn’t get it out. The result is that the rules for defining time on components are different.

The above component has a clear definition for each field that appears. The technical blog I searched directly at the beginning was written as format="yyyy-MM-dd HH:mm", which made me unable to achieve what I wanted on the page. To achieve the desired effect, I finally found the reason after looking through the official documentation, so when writing code, you must read the documentation carefully, or waste a lot of time checking the cause like me! !

 The above renderings:

 

Above code:

<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
            },
    }
}

Reference: The time is displayed by default in the time input box in vue

The above is the method of using element Plus to display the default time. The technology is not difficult, but the difficulty is carefulness! ! !

Guess you like

Origin blog.csdn.net/Daisy_ls/article/details/127651768