Как установить формат даты в теге ввода даты HTML?

105

Мне интересно, можно ли установить формат даты в <input type="date"></input>теге html ... Сейчас это гггг-мм-дд, а мне это нужно в формате дд-мм-гггг.

html  date  input  format 
— Петр
источник
3
Разве это не возможный дубликат указания вывода значения для типа ввода HTML5 = дата? ? Я бы сказал, что этот вопрос здесь лучше задать, чем тот, что был старше, но на тот, что постарше, есть довольно хороший ответ.
— Arsen7 08
— Vaibhav Mule
Мои настройки страны голландские, а в Chrome отображается ДД-ММ-ГГГГ. Кажется, это зависит от настроек Windows клиента, использующего веб-сайт.
— dark_passages

Ответы:

11

Вы этого не сделаете.

Во-первых, ваш вопрос неоднозначен - вы имеете в виду формат, в котором он отображается для пользователя, или формат, в котором он передается на веб-сервер?

Если вы имеете в виду формат, в котором он отображается для пользователя, то это связано с интерфейсом конечного пользователя, а не с тем, что вы указываете в HTML. Обычно я ожидаю, что это будет основано на формате даты, установленном в настройках локали операционной системы. Нет смысла пытаться переопределить его собственным предпочтительным форматом, поскольку формат, в котором он отображается, является (вообще говоря) правильным для локали пользователя и формата, в котором пользователь записывает / понимает даты.

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

— Стюарт
источник
1
К сожалению, ваш второй комментарий не совсем верен в реальном мире. Некоторые браузеры, такие как Chrome и Opera, по крайней мере соблюдают порядок объектов, но не более того. Например, мои настройки ОС локали указать , что в короткий день в первый день августа этого года должно быть 1 / 8-2016 , но Chrome и Opera показывают 01/08/2016 . Другие браузеры, такие как Safari и Firefox (по крайней мере, в OS X), полностью игнорируют настройки ОС и всегда показывают 2016-08-16, несмотря ни на что. На сайте, где пользователи могут устанавливать свои собственные предпочтения даты, определенно имеет смысл переопределить это.
— Janus Bahs Jacquet
(Не обращайте внимания на примечание о Firefox и Safari ... Я устал. Ни один из браузеров не поддерживает тип даты вообще, поэтому они просто показывают основной формат значения, который в случае моего текущего кода - ГГГГ-ММ-ДД .)
— Janus Bahs Jacquet
Большинство людей спрашивают, как изменить формат отображения / ввода даты, желая позволить пользователям устанавливать свои собственные предпочтения, или навязывать свои собственные предпочтительные форматы даты миру? Последнее, как я уже сказал, никому не следует делать, но вы можете спорить в любом случае о том, подходит ли первое. Но это будет презентационная установка, выходящая за рамки HTML.
— Стюарт
Проблема в том, что это презентационная установка , которую невозможно установить . Параметры представления в целом относятся к CSS, но изменить это в CSS (или где-либо еще) невозможно. Кроме того, даже сама спецификация HTML не свободна от презентационных настроек. Например, в разделе input[type=password]говорится, что «пользовательский агент должен скрывать значение, чтобы люди, кроме пользователя, не могли его увидеть», что является такой же презентацией, как и утверждение, что пользовательский агент должен представлять дату определенным образом.
— Janus Bahs Jacquet
1
Некоторые скажут, что это хорошо , что его нельзя установить, так как это не позволяет веб-мастерам навязывать миру свои собственные предпочтительные форматы даты. Но ввод пароля заставил меня задуматься. Во многих местах спецификация HTML действительно дает рекомендации по оформлению, которые по сути являются рекомендациями для таблиц стилей по умолчанию для браузера. Разница здесь в том, что, похоже, нет свойства CSS для этого конкретного аспекта представления.
— Стюарт
11

Я нашел тот же вопрос или связанный с ним вопрос в stackoverflow

Есть ли способ изменить формат input type = «date»?

Я нашел одно простое решение: вы не можете указать формат частиц, но вы можете настроить его.

HTML-код:

    <body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>

Код 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;
}

Вывод:

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

— Ашиш Бхатт
источник
Еще лучше - используйте css для размещения прозрачного элемента управления датой над обычным вводом
— Джордж Мауэр,
Спасибо за ответ, если у вас есть ссылка или код для этого, мне нужно обновить
— ашиш бхатт
Это отличный вариант.
— Диллон Бернетт
Я думаю, он спрашивает, возможно ли это с HTML (исходя из вопроса), а не с CSS или Javascript.
— Шизукура 02
6

Если вы используете jQuery, вот хороший простой метод

$("#dateField").val(new Date().toISOString().substring(0, 10));

Или есть старый традиционный способ:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
— sean.boyer
источник
4

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

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>
— Пол IE
источник
<pre> <input type = "text" name = "input1" placeholder = "ГГГГ-ММ-ДД" обязательный шаблон = "[0-9] {4} - [0-9] {2} - [0-9] ] {2} "title =" Введите дату в этом форматеart ГГГГ-ММ-ДД "/> </pre>
— Paul IE
8
Я цитирую требование явно было: «Мне нужно это в формате дд-мм-гггг». Как это помогает?
— Harijs Krūtainis
1
не работает с Firefox. Этот HTML показывает ввод с заполнителем мм / дд / гггг. Мои окна и мой firefox настроены на голландский как первый язык. В региональных настройках Windows указана краткая дата: 30-11-2018.
— Роланд
1

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

— Ошибка синтаксиса
источник
1 
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
— Дирадж Рао
источник
3
Благодарим вас за этот фрагмент кода, который может оказать немедленную помощь. Правильное объяснение значительно повысило бы его образовательную ценность, показав, почему это хорошее решение проблемы, и сделало бы его более полезным для будущих читателей с похожими, но не идентичными вопросами. Пожалуйста , измените свой ответ , чтобы добавить объяснение, и дать указание о том , что применять ограничения и допущения.
— Тоби Спейт
1

Я провел много исследований и не думаю, что можно принудительно использовать формат файла <input type="date">. Браузер выбирает локальный формат, и в зависимости от настроек пользователя, если язык пользователя английский, дата будет отображаться в английском формате (мм / дд / гггг).

На мой взгляд, лучшее решение - использовать плагин для управления дисплеем.

Jquery DatePicker кажется хорошим вариантом, поскольку вы можете принудительно установить локализацию , формат даты ...

— Фифи
источник
1

Я придумал несколько иной ответ, чем все, что я читал выше.

В моем решении используется небольшой фрагмент JavaScript и ввод HTML.

Дата, принятая входом, приводит к строке в формате «гггг-мм-дд». Мы можем разделить его и правильно разместить как новую дату ().

Вот базовый HTML:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

Вот базовый JS:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

Вы можете отформатировать дату как хотите. Вы можете создать новый Date () и получить оттуда всю информацию ... или просто использовать userDate [] для построения вашей строки.

Имейте в виду, что некоторые способы ввода даты в 'new Date ()' дают неожиданный результат. (т.е. - на один день позже)

— thielr7
источник
1 
<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>
— Пала Даттадри
источник
2
Когда вы размещаете здесь HTML-код, очень важно, чтобы вы отформатировали его как код. Если вы этого не сделаете, он будет отформатирован как часть страницы, и ваш ответ не будет похож на ответ. Если вы не знаете, как форматировать, в справочном центре есть хорошее руководство
— Зои,
0

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

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

— тенистый
источник
-1

Чистая реализация без зависимостей. https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css">
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  </style>

  <input class="dateField" id="dateField" type="date"></input>
  <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>

  <script>
    var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

    fakeDateField.addEventListener("click", function() {
      document.getElementById("dateField").focus();
    }, false);

    dateField.addEventListener("focus", function() {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    });

    dateField.addEventListener("blur", function() {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    });

    dateField.addEventListener("change", function() {
      // this method could be replaced by momentJS stuff
      if (dateField.value.length < 1) {
        return;
      }

      var date = new Date(dateField.value);
      var day = date.getUTCDate();
      var month = date.getUTCMonth() + 1; //zero-based month values
      fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
    });

  </script>
— Джеймс Перих
источник
-1

Мы можем изменить этот формат yyyy-mm-dd на dd-mm-yyyy в javascript с помощью метода разделения.

let dateyear= "2020-03-18";
let arr = dateyear.split('-') //now we get array of these and we can made in any format as we want
let dateFormat = arr[2] + "-" + arr[1] + "-" + arr[0]  //In dd-mm-yyyy format
— Нарун Датта
источник
-2

Вот решение: 

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

надеюсь, это решит проблему :)

— Мухаммад Вакас
источник
1
Ваше решение не использует ввод HTML типа даты, поэтому на самом деле не отвечает на вопрос.
— Винсент
вам не нужно устанавливать его тип на сегодняшний день. для datepicker он будет работать без даты. Попробуйте, надеюсь, это решит вашу проблему.
— Мухаммад Вакас
-3

Формат значения даты 'YYYY-MM-DD'. См. Следующий пример

<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>

Все, что вам нужно, это отформатировать дату в php, asp, ruby ​​или в любом другом формате, чтобы иметь этот формат.

— Чарми
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.