@TheSerKat

Как изменить формат даты для input date?

Есть поле ввода даты:
<input class="datapicker" v-model="docData.FacturaDoc.FacturaDate" :placeholder="$t('documents.headers.DATE')" type="text" onfocus="(this.type='date')" onblur="(this.type='text')">

Юзер выбирает или пишет вручную дату по маске дд.мм.гггг Например 05.03.2020 . Но когда он нажмет на любое место на сайте, формат даты которую он ввел в поле сразу же изменяется на гггг-мм-дд 2020-03-05 и такой формат попадет в v-model и на сервер. Получается что-ли input выдает стандартный формат даты для сервера? Как его изменить?
Главное чтобы в поле был placeholder когда поле не заполнено. В этом помогает onfocus="(this.type='date')" onblur="(this.type='text')" Но когда дата выбрана и например юзер щелкнул по пустому месту. Формат даты меняется.
  • Вопрос задан
  • 128 просмотров
Пригласить эксперта
Ответы на вопрос 3
Seasle
@Seasle Куратор тега JavaScript
Помог - отметь решением \( ゚ヮ゚)/
<input type="date" /> Без переключения туда-сюда.
Ответ написан
Kozack
@Kozack Куратор тега JavaScript
Вам не нужна маска на дате. Значение поля всегда в международном формате не зависимо от настроек локали.

<input type="date" />
А для получения даты
HTMLInputElement.value // 2020-03-06
new Date(HTMLInputElement.value) // Date Fri Mar 06 2020 02:00:00 GMT+0200

И получая эту дату вы можете её преобразовать как хотите. Но лучше всего её хранить как раз в международном формате или в timestamp.

JS например легко его поймёт, в отличии от вашего:
new Date(1583366400000) // Date Thu Mar 05 2020 02:00:00 GMT+0200
new Date("2020-03-05")  // Date Thu Mar 05 2020 02:00:00 GMT+0200
new Date("05.03.2020")  // Invalid Date
Ответ написан
0xD34F
@0xD34F Куратор тега JavaScript
А может, стоит перестать заниматься ерундой и взять готовый компонент, умеющий делать то, что вам нужно?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы