Date preprocessed ( Set the starting default time to the current time , The default end time is set to one month later ), Even if you click the time, you will not report an error
Operation diagram effect

vue file
<template> <div> <label> Time at the beginning of this month </label> <el-date-picker v-model="startTime" type
="datetime" :editable="false" format="yyyy-MM-dd HH:mm:ss" style="width: 200px"
value-format="yyyy-MM-dd HH:mm:ss" ></el-date-picker> <label> current time </label> <!--
If we set a default value for one of the dates , Then try not to use it for him again value-
format Yes , Otherwise, an error will be reported , Because he is string type , We can convert the data into the desired data at the back end when we initiate the request , Examples are as follows --> <el-date-
picker v-model="endTime" type="datetime" :editable="false" format="yyyy-MM-dd
HH:mm:ss" style="width: 200px" value-format="yyyy-MM-dd HH:mm:ss" ></el-date-
picker> <!-- Get the time value one month after the current time --> <label> Time in a month </label> <el-date-picker v-model=
"nextTime" type="datetime" :editable="false" format="yyyy-MM-dd HH:mm:ss" style=
"width: 200px" value-format="yyyy-MM-dd HH:mm:ss" ></el-date-picker> <el-button
@click="find"> query </el-button> </div> </template> <script> export default { data()
{ return { startTime: "", endTime: "", nextTime: "", } }, methods: {
getStartTime() { // Get the first day of its current month var data = new Date() var Da = new Date(data.
getTime()) var y = Da.getFullYear() var m = Da.getMonth() + 1 m = m < 10 ? "0" +
m: m return y + "-" + m + "-" + "01" + " " + "00" + ":" + "00" + ":" + "00" },
getEndTime() { var data = new Date() var Da = new Date(data.getTime()) var y =
Da.getFullYear() var m = Da.getMonth() + 1 var d = Da.getDate() var H = Da.
getHours() var mm = Da.getMinutes() var ss = Da.getSeconds() m = m < 10 ? "0" +
m: m d = d < 10 ? "0" + d : d H = H < 10 ? "0" + H : H return y + "-" + m + "-"
+ d + " " + H + ":" + mm + ":" + ss }, getnextTime() { var data = new Date() var
Da= new Date(data.getTime() + 24 * 60 * 60 * 1000 * 30) var y = Da.getFullYear(
) var m = Da.getMonth() + 1 var d = Da.getDate() var H = Da.getHours() var mm =
Da.getMinutes() var ss = Da.getSeconds() m = m < 10 ? "0" + m : m d = d < 10 ?
"0" + d : d H = H < 10 ? "0" + H : H return y + "-" + m + "-" + d + " " + H +
":" + mm + ":" + ss }, find() { console.log(this.startTime, this.endTime, this.
nextTime) }, }, mounted() { var vm = this vm.startTime = vm.getStartTime() vm.
endTime= vm.getEndTime() vm.nextTime = vm.getnextTime() }, } </script>

Technology