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

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

Вопрос заключается в том , можно ли изменить свой формат , чтобы что - то вроде: DD-MM-YYYY?

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

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

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

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

Этот формат используется valueатрибутом HTML и свойством DOM и используется при обычной отправке формы.

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

Браузеры не ограничены в том, как они представляют ввод даты. На момент написания статьи 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. Я подозреваю, что то же самое верно для других браузеров, хотя я не смог проверить это.

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

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

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

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

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

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

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

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

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

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

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

$("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 (особенно желательно, так как имитаторы родных дат на сенсорных экранах непобедимы, IMHO). Не проверял других, но не ожидаю сбоя ни в одном Webkit.

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

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

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

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

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

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

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

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

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

Работает для мобильных телефонов с веб-браузером и событий указателя для 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>

Прочитав много обсуждений, я подготовил простое решение, но я не хочу использовать много 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;
}

Вывод:

Как уже говорилось, <input type=date ... >в большинстве браузеров эта функция реализована не полностью, поэтому давайте поговорим о веб-наборе, таком как браузеры (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. ком / вопросы / 21316 / как-кан-я-подгоняет-а-системы локали

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

$ date +%x
01-06-2015

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

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

Браузеры получают формат ввода даты из системного формата даты пользователя.

(Проверено в поддерживаемых браузерах, Chrome, Edge.)

Поскольку на данный момент не существует стандарта, определяемого спецификациями для изменения стиля управления датами, его невозможно реализовать в браузерах.

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

Помните, что это просто формат пользовательского интерфейса на экране, который видят пользователи, в вашем javascript / backend вы всегда можете сохранить желаемый формат.

См. Страницу разработчиков Google на том же.

Невозможно изменить веб-браузер, использующий формат даты по умолчанию на компьютере или мобильном телефоне пользователя. Но если вы можете использовать jquery и jquery UI, есть средство выбора даты, которое можно проектировать и отображать в любом формате по желанию разработчика. ссылка на средство выбора даты в jquery UI находится на этой странице http://jqueryui.com/datepicker/, где вы можете найти демонстрационную версию, а также ссылку на код и документацию или документацию

Изменить: -Я считаю, что Chrome использует языковые настройки, которые по умолчанию равны системным настройкам, но пользователь может изменить их, но разработчик не может заставить пользователей сделать это, поэтому вы должны использовать другие решения js, как я говорю, вы можете искать в Интернете с такими запросами, как Javascript Date-Pickers или JQuery Date-Picker

я нашел способ изменить формат, это хитрый способ, я просто изменил внешний вид полей ввода даты, используя только код 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;
  
}

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

Поскольку пост активен 2 месяца назад. поэтому я подумал дать свой вклад, а также.

В моем случае я получаю дату от карт-ридера, который поставляется в формате дд / мм / гггг.

что я делаю. Например

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }

<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

что делает код:

1. он разбивает дату, которую я получаю как дд / мм / гггг (используя split ()) на основе «/», и создает массив,
2. затем он переворачивает массив (используя reverse ()), поскольку ввод даты поддерживает обратное тому, что я получаю.
3. затем он присоединяет (используя join ()) массив к строке в соответствии с форматом, требуемым для поля ввода

Все это делается в одну строку.

Я думал, что это поможет кому-то, поэтому я написал это.

Я искал эту проблему 2 года назад, и мои поиски в Google снова привели меня к этому вопросу. Не тратьте свое время, пытаясь справиться с этим с помощью чистого JavaScript. Я трачу свое время, пытаясь это сделать dd/mm/yyyy. Там нет полных решений, которые подходят для всех браузеров. Поэтому я рекомендую использовать jQuery DatePicker или сказать вашему клиенту работать с форматом даты по умолчанию

Я знаю, что это старая публикация, но это первое предложение в поиске Google, короткий ответ «нет», рекомендуемый ответ: пользовательский пикер даты, правильный ответ, который я использую, - использование текстового поля для имитации ввода даты и выполнения любого формата, который вы хотите вот код

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1 - обратите внимание, что этот метод работает только для браузера, который поддерживает тип даты.

2- первая функция в коде JS предназначена для браузера, который не поддерживает тип даты и устанавливает вид обычного ввода текста.

3 - если вы будете использовать этот код для ввода нескольких дат на своей странице, измените идентификатор «xTime» для ввода текста в вызове функции и на самом вводе на что-то другое и, конечно же, используйте имя ввода, которое вы хотите для Форма отправки.

4-во второй функции вы можете использовать любой формат, который вы хотите вместо дня + "/" + месяц + "/" + год, например, год + "/" + месяц + "/" + день, а в текстовом вводе использовать заполнитель или значение как гггг / мм / дд для пользователя при загрузке страницы.