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

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

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

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

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

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

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

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

надеюсь, что это помогает!

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

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

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

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

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

после многих препятствий, я придумал решение, которое позволяет изменять формат. Есть несколько предостережений, но он может использоваться, если вы хотите, чтобы " 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]);
        });
    });
}

Сасс:

$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-YYYY.

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

попробовать это, если вам нужно быстрый решение чтобы сделать гггг-ММ-ДД пойти "ДД-Сен -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>

как сказал <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 кажется, отвергнут chrome (и я думаю, что это ошибка в webkit или chrome), к сожалению не работает. :'(

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

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

выход:

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

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

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

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

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

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

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

обратитесь к странице разработчиков google на том же.

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

<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 и в текстовом вводе использовать заполнитель или значение как гггг / ММ / ДД для пользователь при загрузке страницы.

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>

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

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