Есть ли способ изменить формат ввода type = "date"?

Question

Я работаю с элементами HTML5 на моей веб-странице. По умолчанию ввод type="date" показывает дату как YYYY-MM-DD.

Вопрос в том, можно ли изменить его формат на что-то вроде: DD-MM-YYYY?

Answer 1

Невозможно изменить формат

Мы должны различать формат передачи по проводам и формат представления браузера.

формат провода

Спецификация HTML5 ввода даты относится к спецификации RFC3339 , которая задает полный формат даты, равный: yyyy-mm-dd. См. раздел 5.6 спецификации RFC3339 для получения более подробной информации.

Формат презентации

Браузеры не ограничены в том, как они представляют ввод даты. На момент написания статьи Chrome, Edge, Firefox и Opera имели поддержку даты (см. здесь ). Все они отображают средство выбора даты и форматируют текст в поле ввода.

Настольные устройства

Для Chrome, Firefox и Opera форматирование текста поля ввода зависит от языковой настройки браузера. Для Edge это основано на настройке языка Windows. К сожалению, все веб-браузеры игнорируют форматирование даты, настроенное в операционной системе. Для меня это очень странное поведение, и что-то нужно учитывать при использовании этого типа ввода. Например, голландские пользователи, для которых в операционной системе или в браузере установлен язык en-us, будут отображаться 01/30/2019 вместо того формата, к которому они привыкли: 30-01-2019.

Internet Explorer 9, 10 и 11 отображают поле ввода текста в формате проводного соединения.

Мобильные устройства

Специально для Chrome на Android форматирование основано на языке отображения Android. Я подозреваю, что то же самое верно и для других браузеров, хотя я не смог проверить это.

Answer 2

С тех пор, как был задан этот вопрос, в веб-сфере произошло довольно много событий, и одна из самых захватывающих - посадка веб-компонентов . Теперь вы можете элегантно решить эту проблему с помощью пользовательского элемента HTML5 , разработанного в соответствии с вашими потребностями. Если вы хотите переопределить / изменить работу любого HTML-тега, просто создайте свой, играя с shadow dom .

Хорошая новость заключается в том, что уже имеется множество шаблонов, так что, скорее всего, вам не нужно придумывать решение с нуля. Просто проверьте что люди строят и получают идеи оттуда.

Вы можете начать с простого (и работающего) решения, такого как datetime-input для полимера, которое позволяет вам использовать такой тег:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

или вы можете получить креативные и всплывающие полные подборщики дат , стилизованные по вашему желанию , с форматированием и локалями, которые вы желаете, обратными вызовами и вашим длинным списком опций (у вас есть целый Пользовательский API в вашем распоряжении!)

Соответствует стандартам, без хаков.

Дважды проверьте доступные полифиллы , какие браузеры / версии они поддерживают, и если они покрывают достаточно% вашей пользовательской базы ... Это 2018 год, так что, скорее всего, это точно охватывают большинство ваших пользователей.

Надеюсь, это поможет!

Answer 3

Как уже упоминалось ранее, официально изменить формат невозможно. Однако это поле можно стилизовать, поэтому (с небольшой помощью JS) оно отображает дату в желаемом формате. Некоторые из возможностей манипулирования вводом даты теряются таким образом, но если желание форсировать формат больше, это решение может быть способом. Поля даты остаются только такими:

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

Остальное немного CSS и JS: http://jsfiddle.net/g7mvaosL/

Он отлично работает на Chrome для настольных компьютеров и Safari на iOS (особенно желательно, так как собственные манипуляторы дат на сенсорных экранах непобедимы ИМХО). Не проверял других, но не ожидаю сбоя ни в одном Webkit.

Answer 4

Важно различать два разных формата :

• RFC 3339 / ISO 8601 "формат провода": ГГГГ-ММ-ДД. Согласно спецификации HTML5, это формат, который должен использоваться для значения ввода при отправке формы или по запросу через API DOM. Это не зависит от региона и региона.
• Формат, отображаемый пользовательским интерфейсом управления и принятый как пользовательский ввод. Поставщикам браузеров рекомендуется следовать предпочтениям пользователя. Например, в Mac OS с регионом «США», выбранным на панели настроек «Язык и текст», в Chrome 20 используется формат «m / d / yy».

Спецификация HTML5 не включает какие-либо средства переопределения или указания вручную любого из этих форматов.

Answer 5

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

Answer 6

После многих препятствий я придумал решение, позволяющее изменить формат. Есть несколько предостережений, но их можно использовать, если вы хотите, чтобы 'Jan' или '01' отображались последовательно. Он работает в Chrome на Windows и Mac только из-за того, что Firefox еще не поддерживает встроенные средства выбора даты.

https://github.com/northamerican/custom-input-date-format

JS:

function updateDateInputs() { 
    $('input').each(function() {
        var $date = $(this),
            date = $date.val().split('-'),
            format = ['year', 'month', 'day'];
        $.each(format, function(i, v) {
            $date.attr('data-' + v, +date[i]);
        });
    });
}

SASS:

$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
    $i: index($months, $month);

    input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
        content: "#{$month}";
    }
}

Answer 7

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

Так что должен быть способ форсировать определенный формат. Я занимаюсь разработкой веб-страницы HTML5, и теперь поиск по датам не выполняется в разных форматах.

Answer 8

Попробуйте , если вам нужно быстрое решение Чтобы сделать гггг-мм-дд "dd-Sep -2016"

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

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

Работает для мобильных устройств браузера WebKit и события указателя для IE11 + требуют jQuery и Jquery Date

$("#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>

Answer 9

Прочитав много обсуждений, я подготовил простое решение, но я не хочу использовать много Jquery и CSS, просто немного javascript.

HTML-код:

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

Код CSS:

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

Код JavaScript:

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

Вывод:

Answer 10

Как уже говорилось, <input type=date ... > не полностью реализован в большинстве браузеров, поэтому давайте поговорим о webkit, таких как браузеры (chrome).

Используя linux, вы можете изменить его, изменив переменную окружения LANG, LC_TIME не похоже на работу (по крайней мере для меня).

Вы можете набрать locale в терминале, чтобы увидеть ваши текущие значения.Я думаю, что та же самая концепция может быть применена к IOS.

например: Использование:

LANG=en_US.UTF-8 /opt/google/chrome/chrome

Дата показана как mm/dd/yyyy

Использование:

LANG=pt_BR /opt/google/chrome/chrome

Дата отображается как dd/mm/yyyy

. Вы можете использовать http://lh.2xlibre.net/locale/pt_BR/ (изменить pt_BR в соответствии с вашим языковым стандартом), чтобы создать свой собственный языковой стандарт и отформатировать даты по своему усмотрению..

Хорошая более сложная справка о том, как изменить системную дату по умолчанию: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ и https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

Вы можете увидеть реальный текущий формат даты, используя date:

$ date +%x
01-06-2015

Но так как LC_TIME и d_fmt, похоже, отклоняются хромом (и я думаю, что это ошибка в webkit или chrome), к сожалению это не работает .: '(

Так что, к сожалению, ответ, если переменная окружения IF LANG не решит вашу проблему, пока нет способа.