CODEWITHSUNDEEP
javascriptvue.jsdatetimedatepicker
Yasin Demirkaya
Yasin Demirkaya

Reputation: 57

Vue2 Date-Picker Date Time Format Empty Problem

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. enter image description here

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.

Upvotes: 1

Views: 1449

Answers (1)

Mohammad Masoudi
Mohammad Masoudi

Reputation: 446

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

To convert that long string that comes from the Date object to your backend format, you can use this way

define these two functions in your methods object:

  methods: {
    padTo2Digits(num) {
      return num.toString().padStart(2, "0");
    },
    formatDate(date) {
      return (
        [
          date.getFullYear(),
          this.padTo2Digits(date.getMonth() + 1),
          this.padTo2Digits(date.getDate()),
        ].join("-") +
        " " +
        [
          this.padTo2Digits(date.getHours()),
          this.padTo2Digits(date.getMinutes()),
          this.padTo2Digits(date.getSeconds()),
        ].join(":")
      );
    },
  },

and when you call your API to send data to your backend use this:

// some code here for API call
this.formatDate(this.meeting.startDate)

References:

Format a Date as YYYY-MM-DD hh:mm:ss in JavaScript

Date Object JavaScript

Upvotes: 2

Related Questions