In our company, we use vue2-datepicker to manage the starting and ending times of meetings. The dates are stored in "YYYY-MM-DD HH:mm" format on the backend, but we convert them to "DD-MM-YYYY HH:mm" format when retrieving the data in the mounted() hook. This conversion is necessary as it aligns with the date representation standards in our country.
Although I apply the same method to all datepickers, one particular instance presents an issue with the HH:mm format. To address this, I utilize a function called "responseDateTimeFormatter" to extract and convert the incoming YYYY-MM-DD HH:mm formatted date into the desired format.
When submitting the data, I employ the requestDateTimeFormatter function to convert it back to YYYY-MM-DD HH:mm for database storage. Despite following these steps, the <date-picker> components remain empty once the data has been converted.
Below are snippets of my code:
Date Picker:
<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>
Upon conversion, the v-model appears as follows:
meetingStartDate = 30-07-2022 09:30
To achieve this conversion, I utilize the 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 block within the then() statement:
.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)
})
Despite meeting.startDate being correctly formatted and aligned with the DatePicker's attribute, the component remains empty. This issue only arises when using HH:mm in datetime format. Any insights on how to resolve this would be greatly appreciated. Thank you in advance.