Мне интересно, можно ли установить формат даты в теге html <input type="date"></input>... В настоящее время это yyyy-mm-dd, в то время как мне это нужно в формате dd-mm-yyyy.
Как установить формат даты в теге ввода даты HTML?
Ответ 1
Я думаю, что нет решения, если использовать только HTML
Я думаю, вы должны использовать jquery
подходящий плагин jquery jQuery Masked Input
Ответ 2
Нет.
Во-первых, ваш вопрос неоднозначен - вы имеете в виду формат, в котором он отображается пользователю, или формат, в котором он передается на веб-сервер?
Если вы имеете в виду формат, в котором он отображается пользователю, то это зависит от интерфейса конечного пользователя, а не с тем, что вы указываете в HTML. Обычно я ожидаю, что он будет основан на формате даты, который установлен в настройках локали операционной системы. Нет смысла пытаться переопределить его в своем предпочтительном формате, так как формат, который он отображает, является (вообще говоря) правильным для языкового стандарта пользователя и форматом, который пользователь использует для написания/понимания дат.
Если вы имеете в виду формат, в котором он передается на сервер, вы пытаетесь исправить неправильную проблему. Что вам нужно сделать, это запрограммировать код на стороне сервера, чтобы принимать даты в формате yyyy-mm-dd.
Ответ 3
Я нашел тот же вопрос или связанный с ним вопрос в 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;
}
Вывод:
Ответ 4
Если вы используете jQuery, вот простой простой метод
$("#dateField").val(new Date().toISOString().substring(0, 10));
Или там старый традиционный способ:
document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
Ответ 5
Почему бы не использовать элемент управления 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"/>
Ответ 6
Я так думаю, в HTML нет синтаксиса для формата DD-MM-YYYY. См. Эту страницу http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm. В некотором роде это поможет вам. Else использовать javascript date picker.
Ответ 7
Я не знаю этого точно, но я думаю, что это должно быть обработано браузером на основе пользовательских настроек даты/времени. Попробуйте настроить компьютер для отображения дат в этом формате.
Ответ 8
$('input[type="date"]').change(function(){
alert(this.value.split("-").reverse().join("-"));
});
Ответ 9
Я провел много исследований, и я не думаю, что можно форсировать формат <input type="date">. Браузер выбирает локальный формат, и в зависимости от настроек пользователя, если язык пользователя на английском, дата будет отображаться в английском формате (мм/дд/гггг).
На мой взгляд, лучшее решение - использовать плагин для управления дисплеем.
Jquery DatePicker кажется хорошим вариантом, так как вы можете форсировать локализацию, формат даты...
Ответ 10
Я придумал немного другой ответ, чем все, что я прочитал выше.
Мое решение использует немного 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()' приводят к неожиданному результату. (то есть - один день позади)
Ответ 11
Чистая реализация без зависимостей. 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>
Ответ 12
Короткий прямой ответ - "нет" или "нет", но я предложил метод использования текстового поля и чистого кода 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">▼</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 и в текстовом вводе используйте заполнитель или значение в виде гггг/мм/дд для пользователя при загрузке страницы.
Ответ 13
Для форматирования в мм-дд-гггг
аа = date.split( "-")
дата = аа [1] + '-' +aa [2] + '-' +aa [0]
Ответ 14
<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>
Ответ 15
Вот решение:
<input type="text" id="end_dt"/>
$(document).ready(function () {
$("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});
надеюсь, это решит проблему :)
Ответ 16
На самом деле есть, но, похоже, никто не удосужился его поддержать.
Вы были правы <input type="date">.
В случае, если кто-то меня сомневается.
http://www.w3schools.com/html/html5_form_input_types.asp
Ответ 17
Формат значения даты 'YYYY-MM-DD'. См. Следующий пример
<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>
Все, что вам нужно, - это отформатировать дату в php, asp, ruby или любом другом, чтобы иметь этот формат.