Я работаю с элементами HTML5 на моей веб-странице. По умолчанию вход type = "date"
отображает дату как YYYY-MM-DD
.
Вопрос в том, можно ли изменить его формат на что-то вроде: ДД-ММ-ГГГГ
?
Невозможно изменить формат
Мы должны различать формат перепровода и формат презентации браузера.
Спецификация ввода даты 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. Я подозреваю, что то же самое верно для других браузеров, хотя я не смог это проверить.
С тех пор, как был задан этот вопрос, в веб-области произошло довольно много вещей, и одним из самых захватывающих является посадка веб-компонентов. Теперь вы можете элегантно решить эту проблему с помощью обычного элемента HTML5, разработанного в соответствии с вашими потребностями. Если вы хотите переопределить / изменить работу любого HTML-тега, просто создайте свой, играя с shadow dom .
Хорошей новостью является то, что уже есть много шаблонов, поэтому, скорее всего, вам не нужно будет придумывать решение с нуля. Просто проверьте, что люди строят, и получите идеи оттуда.
Вы можете начать с простого (и работающего) решения, такого как datetime-input для полимера, которое позволяет использовать тег, подобный этому:
<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:
Он отлично работает на Chrome для настольных компьютеров и Safari на iOS (особенно желательно, поскольку собственные манипуляторы даты на сенсорных экранах непревзойденны ИМХО). Не проверял других, но не ожидал, что потерпит неудачу ни в одном веб-ките.
Важно различать два разных формата:
Спецификация HTML5 не включает никаких средств переопределения или ручного указания любого формата.
Я верю, что браузер будет использовать локальный формат даты. Не думай, что это можно изменить. Конечно, вы можете использовать пользовательский сборщик дат.
После многих препятствий я придумал решение, которое позволяет изменять < input type = "date" > формат. Есть несколько предостережений, но это можно использовать, если вы хотите, чтобы «Ян» или «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]);
});
});
}
ПРОЙДИТЕ:
$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}";
}
}
Google Chrome в своей последней бета-версии, наконец, использует ввод type = date
, а формат `DD-MM-YYY``.
Таким образом, должен быть способ форсировать определенный формат. Я разрабатываю веб-страницу HTML5, и поиск по дате теперь не выполняется в разных форматах.
Попробуйте это, если вам нужно быстрое решение Чтобы сделать yyyy-mm-dd, перейдите "dd- Sep -2016"
Создайте рядом с вашим входом один класс диапазона (действуйте как метка)
Обновляйте метку каждый раз, когда ваша дата изменяется пользователем, или когда необходимо загрузить данные.
Работает для мобильных телефонов браузера webkit , а события-указатели для IE11 + требуют jQuery и Jquery Date
& Лт;!- начать фрагмент: js скрыть: false - >
$("#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 Code:
#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;
}
Вывод:
Невозможно изменить браузеры веб-кита, используя компьютер пользователя или формат даты по умолчанию для мобильных телефонов. Но если вы можете использовать пользовательский интерфейс jquery и jquery, есть средство выбора даты, которое можно оформить и отображать в любом формате по желанию разработчика. ссылка на сборщик даты пользовательского интерфейса jquery есть на этой странице http://jqueryui.com/datepicker/ вы можете найти демо, а также код и документацию или ссылку на документацию
Редактировать: - Я считаю, что chrome использует языковые настройки, которые по умолчанию равны системным настройкам, но пользователь может изменить их, но разработчик может 'Это заставляет пользователей делать это, поэтому вам придется использовать другие решения js, такие как я говорю, что вы можете искать в Интернете запросы, такие как javascript-pickers или jquery date-picker
Как сказано, < input type = date ... >
не полностью реализован в большинстве браузеров, поэтому давайте поговорим о веб-ките, таком как браузеры (хром).
Используя 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 / мм / гггг
Вы можете использовать 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), к сожалению это не работает . : '(
Так что, к сожалению, ответ: если переменная среды LANG
не решит вашу проблему, пока нет пути.
Браузеры получают формат ввода даты из системного формата даты пользователя.
(Проверено в поддерживаемых браузерах, Chrome, Edge.)
Поскольку на данный момент не существует стандарта, определяемого спецификациями для изменения стиля контроля даты, его невозможно реализовать в браузерах.
Однако такое поведение при получении формата даты из системных настроек лучше, и я настоятельно рекомендую, чтобы мы не пытались переопределить его. Причина в том, что пользователи увидят формат ввода даты так же, как они настроили в системе / устройстве, и с которым они довольны или соответствуют своей локали.
Помните, что это просто формат пользовательского интерфейса на экране, который видят пользователи, в вашем javascript / backend вы всегда можете сохранить нужный формат.
Я знаю это и № 39;старый пост, но он является первым предложением в поиске 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">▼</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-на второй функции вы можете использовать любой формат вместо дня + "/" + month + "/" + year, например, year +" / "+ month +" / "+ day, а на вводе текста используйте заполнитель или значение yyyy / mm / dd для пользователя при загрузке страницы.
Так как пост активен 2 месяца назад. поэтому я подумал также внести свой вклад.
В моем случае я получаю дату от устройства чтения карт, которое поставляется в формате дд / мм / гггг.
что я делаю. Например.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
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 = "кнопка" value = "заполнить дату" onclick = "filldate ();" >& Лт;!- конец фрагмента - >
что делает код:
Все это делается в одной строке.
я думал, что это поможет кому-то, поэтому я написал это.