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

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

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

вы можете начать с простого (и рабочее) решение, как 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: 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]);
        });
    });
}

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}";
    }
}

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

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

попробовать это если вам нужно быстрый решение чтобы yyyy-mm - dd пошел "DD-Sep -2016"

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

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;
}

выход:

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

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

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 зависит от формата формата даты и времени серверной машины.

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