Vue+Element ui el-date-picker defaults to the current year, month, day, hour, minute, and second and can be selected again

el-date-picker usually gets the current time when the time picker gets the focus. The current requirement is that the form enters the time box by default for the current year, month, day, minute, and second, and can get the selected time again.

The following is my solution, I hope it can help you!

1. First, v-model must be bound to the time selector value

                <el-date-picker
                    v-model="logForm.date"
                    type="datetime"
                    style="width:200px"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    defaule-value="dafaultValue"
                  >
                  </el-date-picker>

2. In the Date method, first use new Date to obtain the current time, followed by hours, minutes, and seconds, and finally the format required for splicing (such as yyyy-MM-dd or yyyy-MM-dd HH:mm:ss, here is the splicing acquisition is the current year, month, day, hour, minute, and second) 

3. The last step uses this.$set(target, key, value)

target: the data source to be changed (can be a data object or an array)
key: the specific data to be changed
value: the reassigned value

this.$set definition: (Actually add a property to the responsive object, and make sure that this new property is also responsive and triggers a view update. It must be used to add a new property to the responsive object)

Date(){
          const nowDate = new Date();
          const date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
            hours: nowDate.getHours(),
            minutes: nowDate.getMinutes(),
            seconds: nowDate.getSeconds()
          };

          const newmonth = date.month > 10 ? date.month : "0" + date.month;
          const newday = date.date > 10 ? date.date : "0" + date.date;
          const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
          const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
          const value =
            date.year +
            "-" +
            newmonth +
            "-" +
            newday +
            " " +
            date.hours +
            ":" +
            newminutes +
            ":" +
            newseconds;

          this.$set(this.logForm, "date", value);

}

Using the above code, you can get the current time and change the time data again