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

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

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

ОТВЕТЫ

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

Ответ 2

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

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

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

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

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

После многих препятствий я придумал решение, позволяющее изменить формат. Существует несколько предостережений, но это можно использовать, если вы хотите последовательно показывать "Янв" или "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}";
    }
}

Ответ 7

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

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

Ответ 8

Попробуйте, если вам нужно быстрое решение. Чтобы сделать yyyy-mm-dd go "dd-Sep -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>

Ответ 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;
}

Вывод:

введите описание изображения здесь

Ответ 10

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

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

Ответ 11

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

Используя 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 или хром), к сожалению он не работает.: '(

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

Ответ 12

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

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

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

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

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

Обратитесь к странице разработчиков Google.

Ответ 13

Я знаю, что это старый пост, но это первое предложение в поиске 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-во второй функции вы можете использовать любой формат, который вы хотите вместо day+ "/" + month + "/" +year например year+ "/" + month + "/" +day и в текстовом вводе используйте заполнитель или значение в виде гггг/мм/дд для пользователя при загрузке страницы.

Ответ 14

function dmy() {
  var mydate = document.getElementById('dat').value;
  //alert(mydate);
  var yf = mydate.split("-")[0];
  var mf = mydate.split("-")[1];
  var df = mydate.split("-")[2];

  var b = localStorage.getItem("b");
  if (!b) {
    b = [];
  } else {
    b = JSON.parse(b);

  }
  b.push({
    df: df,
    mf: mf,
    yf: yf
  });

  localStorage.setItem("b", JSON.stringify(b));
}

function showdate() {
  var sdate = JSON.parse(localStorage.getItem('b'));
  var a = '';
  if (sdate != null) {
    for (var i = 0; i < sdate.length; i++) {
      a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '<br>';

    }
  } else {
    a = 'No DATA';
  }
  document.getElementById('conversion').innerHTML = a;
}

<form onsubmit=dmy()>
  <input type="date" name="dat" id="dat">
  <input type="submit" value="submit">
</form>
<input type="button" value="convert" onclick=showdate()>
<div id="conversion"></div>

Ответ 15

Формат выбора даты в формате HTML5 зависит от формата формата даты сервера.

Итак, вы можете изменить его, изменив формат на сервере развертывания на панели задач.