title: Vue2 Date-Picker Date Time Format Empty Problem
body: <p>I'm using vue2-datepicker to represent starting and ending time of meeting in a company. In our backend we store the dates in &quot;YYYY-MM-DD HH:mm&quot; format but when we get the data, we convert it on the mounted() hook in &quot;DD-MM-YYYY HH:mm&quot; because in our country this is the correct way to represent the date.</p>
  <p>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 &quot;<code>responseDateTimeFormatter</code>&quot; which slices the <code>YYYY-MM-DD HH:mm</code> formatted date and converts into the one I mentioned earlier.
  When I post the data, I also use <code>requestDateTimeFormatter</code> to convert it again as <code>YYYY-MM-DD HH:mm</code> to be stored on database.</p>
  <p>Here is the problem, after I convert the data into the format that I want, the <code>&lt;date-picker&gt;s</code> are all empty. Even though their format attribute is set to same one with my date's.</p>
  <p>Here are my codes:</p>
  <p>DatePicker:</p>
  <pre><code>              &lt;date-picker ref=&quot;startDatepicker&quot; id=&quot;startDate&quot; name=&quot;startDate&quot; v-model=&quot;meeting.startDate&quot; :first-day-of-week=&quot;1&quot; type=&quot;datetime&quot; format=&quot;DD-MM-YYYY HH:mm&quot; @change=&quot;startDateClick&quot; :disabled-date=&quot;disableStartDate&quot; :time-picker-options=&quot;timePickerOptions&quot;&gt;&lt;/date-picker&gt;
  </code></pre>
  <p>After I convert the data the v-model looks as follows</p>
  <pre><code>meetingStartDate = 30-07-2022 09:30
  </code></pre>
  <p>As I explained earlier, it is in <code>YYYY-MM-DD HH:mm</code> format when it came from response.
  I convert it with responseFormatter function below;</p>
  <pre><code>  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 + &quot;-&quot; + month + &quot;-&quot; + year + &quot; &quot; + time;
    },
  </code></pre>
  <p>Here is my <code>then()</code> block;</p>
  <pre><code>  .then((response) =&gt; {
      this.meeting = response
      console.log(&quot;MEETING&quot;, this.meeting)
      this.meeting.startDate = this.responseTimeFormatter(response.startDate)
      console.log(&quot;Start Date&quot;, this.meeting.startDate)
      
      this.meeting.endDate = this.responseTimeFormatter(response.endDate)
      console.log(&quot;End Date&quot;, this.meeting.endDate)
    })
  </code></pre>
  <p>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. <a href="https://i.stack.imgur.com/pZLxY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pZLxY.png" alt="enter image description here" /></a></p>
  <p>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.</p>