Можно ли изменить формат input type="date"?

Как уже упоминалось, официально изменить формат поля ввода даты невозможно. Тем не менее, есть возможность стилизовать это поле, и с помощью небольшого кода на JavaScript мы можем отобразить дату в нужном нам формате. Хотя некоторые возможности работы с полем даты при этом теряются, если желание заставить его отображаться в определённом формате больше, то это решение может подойти. Поле даты остаётся именно таким:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Далее немного CSS и JS: http://jsfiddle.net/g7mvaosL/

Примечание: если вы хотите изменить формат отображения даты, просто измените атрибут data-date-format в элементе input. Не изменяйте строку формата YYYY-MM-DD, передаваемую в moment.

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
            .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")

input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Это решение хорошо работает в Chrome на настольных компьютерах и в Safari на iOS (что особенно желательно, поскольку нативные манипуляторы даты на сенсорных экранах просто не имеют себе равных, на мой взгляд). Я не проверял в других браузерах, но не ожидаю проблем с любыми браузерами на Webkit.

Вы можете изменить формат отображения полей ввода даты с помощью CSS, используя некоторые трюки. Например, ниже приведен код, который позволит вам изменить внешний вид элементов для выбора даты.

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field {
  position: absolute !important;
  border-left: 1px solid #8c8c8c;
  padding: 2px;
  color: #000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field {
  position: absolute !important;
  border-left: 1px solid #8c8c8c;
  padding: 2px;
  color: #000;
  left: 26px;
}

input[type="date"]::-webkit-datetime-edit-day-field {
  position: absolute !important;
  color: #000;
  padding: 2px;
  left: 4px;
}

Для использования этого кода просто создайте элемент ввода типа "date":

<input type="date" value="2019-12-07">

Этот подход позволяет кастомизировать отображение отдельных частей даты, таких как год, месяц и день, с помощью псевдоэлементов для вебкита. Обратите внимание, что это решение может не сработать во всех браузерах, так как поддержка псевдоэлементов может варьироваться. Если вам нужно более универсальное решение, возможно, стоит рассмотреть библиотеки JavaScript для управления датами и их форматированием.

Я полагаю, что браузер будет использовать локальный формат даты. Не думаю, что это можно изменить. Вы, конечно, можете использовать собственный выбор даты.

В последней бета-версии Google Chrome наконец-то реализована поддержка элемента ввода type=date, и формат отображения дат соответствует DD-MM-YYYY. Это может вызывать проблемы, особенно если ваш веб-приложение ожидает другой формат даты.

К сожалению, стандарт HTML5 не предоставляет средства для установки конкретного формата отображения для элемента input с типом date, так как формат даты может варьироваться в зависимости от локали браузера пользователя.

Тем не менее, существует несколько подходов, которые могут помочь вам обеспечить согласованность формата даты:

1. Использование input type="text" с регулярным выражением: Вместо type=date, вы можете использовать type=text и применять регулярное выражение для валидации.

   <input type="text" id="date" pattern="\d{2}-\d{2}-\d{4}" placeholder="ДД-ММ-ГГГГ" required>
   

2. JavaScript/JQuery для форматирования: Если вы хотите оставить type=date, вы можете обрабатывать ввод даты с помощью JavaScript, чтобы форматировать его в нужный вам вид.

   const input = document.querySelector('#dateInput');
   input.addEventListener('change', (event) => {
       const dateValue = new Date(event.target.value);
       const formattedDate = `${pad(dateValue.getDate())}-${pad(dateValue.getMonth() + 1)}-${dateValue.getFullYear()}`;
       console.log(formattedDate);
   });
   
   function pad(num) {
       return num < 10 ? '0' + num : num;
   }
   

3. Библиотеки для работы с датами: Используйте библиотеки, такие как Moment.js или date-fns, чтобы более эффективно обрабатывать и форматировать даты.

Таким образом, наличие разных форматов в разных браузерах — это реальность, с которой придется столкнуться. Используя один из описанных выше методов, вы сможете более контролируемо управлять вводом и выводом данных.

Попробуйте это, если вам нужно быстрое решение для преобразования даты в формате yyyy-mm-dd в dd- Сен -2016.

1. Создайте рядом с вашим полем ввода элемент span с классом (он будет выступать в роли метки).

2. Обновляйте метку каждый раз, когда пользователь изменит дату, или когда нужно загрузить данные.

Работает для мобильных браузеров на основе WebKit. Для работы с pointer-events в IE11+ потребуется jQuery и jQuery UI.

$("#date_input").on("change", function () {
    $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({
        "text-align": "center",
        position: "absolute",
        left: "10px",
        top: "14px",
        width: $(this).width()
    }).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
});

#date_input {
    text-indent: -500px;
    height: 25px;
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id="date_input" dateformat="d M y" type="date" />
<span class="datepicker_label" style="pointer-events: none;"></span>

Не забудьте подключить jQuery и jQuery UI для корректной работы!