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

Поскольку этот вопрос был задан, в веб-сфере произошло немало вещей, и одной из самых захватывающих является посадка веб-компонентов. Теперь вы можете решить эту проблему элегантно с помощью специального элемента HTML5, разработанного в соответствии с вашими потребностями. Если вы хотите переопределить/изменить работу любого тега html, просто создайте свою игру с теневым 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: http://jsfiddle.net/g7mvaosL/

Он отлично работает на Chrome для рабочего стола, а Safari - на iOS (особенно желательно, поскольку собственные манипуляторы на сенсорных экранах непобедимы IMHO). Не проверял для других, но не ожидайте выхода из строя на любом Webkit.

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

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

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

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

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

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

После того, как я прочитал много дискуссий, я подготовил простое решение, но я не хочу использовать много 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 ui date-picker на этой странице http://jqueryui.com/datepicker/ вы можете найти демо, а также ссылку на код и документацию или документацию Если кто-то хочет получить дополнительную помощь, он/она может соединить меня в лучшей социальной сети http://www.funnenjoy.com

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

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

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

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

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

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

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

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

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

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>