Vue не отображается дата в поле <input>

Рейтинг: -1Ответов: 2Опубликовано: 05.04.2023

С сервера получаю объект offer с переменной createdAt: "2023-03-27T16:13:21"

В компоненте Vue соответственно пытаюсь отобразить ее следующим образом

<label>Дата создания.</label>
<input v-model="offer.createdAt"
       type="date"
       class="form-control mb-3" />

Но в итоге получаю это, т.е. существующая дата в поле ввода не отображается. (Остальные поля input отображаются корректно) введите сюда описание изображения

UPD:

После получения объекта строка

this.offer.createdAt = new Date(this.offer.createdAt).toISOString().split('T')[0];

помогла исправить положение. Она это 2023-03-27T16:13:21 превратила в это 2023-03-27. Почему-то поле <input> требует для отображения формат даты yyyy-mm-dd, но преобразовывать каждый раз вручную мне кажется слишком грубо. Может есть вариант избежать этого?

html vue.js
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Проблема была решена довольно просто: изменила type="date" на type="datetime"

▲ 1

Вы можете использоваться библиотеку Moment.js, которая предоставляет простой и гибкий API для управления и форматирования дат в JavaScript.

Вот пример того, как вы можете использовать Moment.js для форматирования значения даты в компоненте Vue:

<template>
  <div>
    <label>Дата создания.</label>
    <input v-model="formattedDate"
           type="date"
           class="form-control mb-3" />
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      offer: {
        createdAt: "2023-03-27T16:13:21"
      }
    }
  },
  computed: {
    formattedDate() {
      return moment(this.offer.createdAt).format('YYYY-MM-DD');
    }
  }
}
</script>