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

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

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

+560
10 сент. '11 в 13:33
источник поделиться
14 ответов

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

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

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

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

Форматирование текста поля ввода выполняется только в Chrome. Edge, Firefox и Opera отображают дату с днем, месяцем и годом в правильном порядке для локали, но непоследовательно используют косые черты (30/01/2018), где, например, ожидается, что тире (30-01-2018) формат календаря.

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

+488
01 мар. '12 в 15:59
источник

Связанные вопросы


Похожие вопросы

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

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

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

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

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

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

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

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

+104
21 авг. '15 в 22:01
источник

Как уже упоминалось ранее, официально невозможно изменить формат. Однако можно создать поле, поэтому (с небольшой помощью 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.

+60
01 июл. '15 в 13:14
источник

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

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

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

+43
09 июл. '12 в 18:11
источник

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

+13
10 сент. '11 в 13:39
источник

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

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

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

+9
16 июн. '12 в 15:30
источник

Попробуйте, если вам нужно быстрое решение. Чтобы сделать 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>
+4
22 июн. '15 в 17:32
источник

Как было сказано, <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, не решает вашу проблему, еще нет способа.

+3
01 июн. '15 в 13:28
источник

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

Вывод:

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

+2
02 сент. '15 в 7:40
источник

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

Изменить: -Я нахожу, что chrome использует языковые настройки, которые по умолчанию равны системным настройкам, но пользователь может их изменить, но разработчик не может заставить пользователей делать это, поэтому вам нужно использовать другие js-решения, как я говорю, вы можете искать в Интернете с помощью запрос как javascript date-pickers или jquery date-picker

+1
04 июн. '14 в 7:55
источник

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

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

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

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

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

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

0
26 мая '18 в 19:23
источник
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>
-3
18 апр. '13 в 16:44
источник

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

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

-5
15 июн. '15 в 11:48
источник

Посмотрите другие вопросы по меткам или Задайте вопрос