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