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

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

97 голосов
/ 08 августа 2011

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

Ответы [ 15 ]

10 голосов
/ 02 сентября 2015

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

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

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

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

Выход:

enter image description here

9 голосов
/ 19 мая 2015

Вы не знаете.

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

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

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

5 голосов
/ 24 января 2014

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

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

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

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
1 голос
/ 07 мая 2019

Вот решение: 

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

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

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

1 голос
/ 06 февраля 2019

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

Мое решение использует небольшой кусочек 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 () 'дает неожиданный результат.(то есть - один день позади)

1 голос
/ 30 августа 2018

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

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

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

1 голос
/ 31 июля 2017 
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
1 голос
/ 06 июля 2016

Почему бы не использовать элемент управления датой 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"/>
1 голос
/ 08 августа 2011

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

1 голос
/ 08 августа 2011

Мне так кажется, в HTML нет синтаксиса для формата DD-MM-YYYY.См. Эту страницу http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm. В некоторой степени это поможет вам.Еще используйте Javascript Date Picker.

Страница:
...