Vue+Element ui el-date-picker のデフォルトは現在の年、月、日、時、分、秒であり、再度選択することができます

el-date-picker は通常、タイム ピッカーがフォーカスを取得したときに現在の時刻を取得します. 現在の要件は、フォームがデフォルトで現在の年、月、日、分、秒のタイム ボックスに入力され、選択された時刻を取得できることです。もう一度。

以下は私の解決策です。お役に立てば幸いです。

1. まず、v-model を時間セレクタ値にバインドする必要があります

                <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. Date メソッドでは、最初に new Date を使用して現在の時刻を取得し、次に時、分、秒を取得し、最後にスプライシングに必要な形式 (yyyy-MM-dd または yyyy-MM-dd HH:mm など) を取得します。 :ss こちらがスプライシング取得) は現在の年月日時分秒) 

3. 最後のステップでは this.$set(target, key, value) を使用します

target: 変更するデータ ソース (データ オブジェクトまたは配列)
key: 変更する特定のデータ
value: 再割り当てされた値

this.$set 定義: (実際にレスポンシブ オブジェクトにプロパティを追加し、新しいプロパティもレスポンシブであり、ビューの更新をトリガーすることを確認します。レスポンシブ オブジェクトに新しいプロパティを追加するために使用する必要があります)

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);

}

上記のコードを使用すると、現在の時刻を取得し、時刻データを再度変更できます

おすすめ

転載: blog.csdn.net/qq_52337177/article/details/125065502