Vue2 Date-Picker 日期時間格式為空問題

Question

我正在使用 vue2-datepicker 來表示公司會議的開始和結束時間。 在我們的后端，我們以“YYYY-MM-DD HH:mm”格式存儲日期，但是當我們獲取數據時，我們將其轉換為“DD-MM-YYYY HH:mm”中的mounted()鈎子，因為在我們的國家這是表示日期的正確方法。

我對所有的日期選擇器都使用了相同的方法，但是這個方法讓我很困擾 HH:mm。 當數據來自 API 時，我使用名為“ responseDateTimeFormatter ”的 function 切片YYYY-MM-DD HH:mm格式的日期並轉換為我之前提到的日期。 當我發布數據時，我還使用requestDateTimeFormatter將其再次轉換為YYYY-MM-DD HH:mm以存儲在數據庫中。

這是問題所在，在我將數據轉換為我想要的格式后， <date-picker>s 。 即使他們的格式屬性設置為與我的日期相同的屬性。

這是我的代碼：

日期選擇器：

              <date-picker ref="startDatepicker" id="startDate" name="startDate" v-model="meeting.startDate" :first-day-of-week="1" type="datetime" format="DD-MM-YYYY HH:mm" @change="startDateClick" :disabled-date="disableStartDate" :time-picker-options="timePickerOptions"></date-picker>

轉換數據后，v-model 如下所示

meetingStartDate = 30-07-2022 09:30

正如我之前解釋的，當它來自響應時，它是YYYY-MM-DD HH:mm格式。 我用下面的 responseFormatter function 轉換它；

  responseTimeFormatter(dateTime) {
    var day = dateTime.slice(8, 10);
    var month = dateTime.slice(5, 7);
    var year = dateTime.slice(0, 4);
    var time = dateTime.slice(11, 16);

    return day + "-" + month + "-" + year + " " + time;
  },

這是我的then()塊；

  .then((response) => {
    this.meeting = response
    console.log("MEETING", this.meeting)
    this.meeting.startDate = this.responseTimeFormatter(response.startDate)
    console.log("Start Date", this.meeting.startDate)
    
    this.meeting.endDate = this.responseTimeFormatter(response.endDate)
    console.log("End Date", this.meeting.endDate)
  })

因此，在所有這些之后， meeting.startDate 的格式正確。 上面 DatePicker 的 v-model 格式正確（與日期選擇器的格式屬性相同），但我仍然沒有在我的日期選擇器中看到日期。 它是空的。

當我在沒有 HH:mm 的情況下使用它時沒有問題，但是在日期時間格式中它給了我這個問題。 有沒有人遇到過這個問題？ 解決辦法是什么？ 提前致謝。

Answer 1

我檢查了vue2-datepicker datepicker package，當我將字符串日期作為輸入傳遞時，它顯示了一個空字段，所以我認為它不接受字符串類型作為日期，你必須傳遞一個日期 object

實際上，您不需要responseTimeFormatter function 將您的 DateTime 字符串傳遞給 Date object，然后完成:)

像這樣修改你的then塊

 .then((response) => {
    this.meeting = response
 
    this.meeting.startDate = new Date(response.startDate)
    this.meeting.endDate = new Date(response.endDate)
  })