Vue2 Date-Picker 日期时间格式为空问题

Question

I'm using vue2-datepicker to represent starting and ending time of meeting in a company. In our backend we store the dates in "YYYY-MM-DD HH:mm" format but when we get the data, we convert it on the mounted() hook in "DD-MM-YYYY HH:mm" because in our country this is the correct way to represent the date.

I'm using the same method for all the datepickers but this one bothers me with HH:mm. When the data comes from API, I use a function called " responseDateTimeFormatter " which slices the YYYY-MM-DD HH:mm formatted date and converts into the one I mentioned earlier. When I post the data, I also use requestDateTimeFormatter to convert it again as YYYY-MM-DD HH:mm to be stored on database.

Here is the problem, after I convert the data into the format that I want, the <date-picker>s are all empty. Even though their format attribute is set to same one with my date's.

Here are my codes:

DatePicker:

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

After I convert the data the v-model looks as follows

meetingStartDate = 30-07-2022 09:30

As I explained earlier, it is in YYYY-MM-DD HH:mm format when it came from response. I convert it with responseFormatter function below;

  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;
  },

Here is my then() block;

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

So after all these, meeting.startDate is in the right format. The v-model of the DatePicker above is in the right format (same with the format attribute of the date picker) but still I am not seeing the date in my date-picker. It is empty.

There is no problem when I use it without HH:mm but in datetime format it gives me this problem. Is there anyone have experienced this problem? What is the solution? Thanks in advance.

Answer 1

I checked out the vue2-datepicker package and when I pass string date as input it shows me an empty field so I think it does not accept string type as a date you must pass a date object

actually, you don't need that responseTimeFormatter function pass your DateTime string to the Date object, and done:)

modify your then block like this

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