如何在 HTML 日期输入标签中设置日期格式？

我想知道是否可以在 html <input type="date"></input>标记中设置日期格式... 目前它是 yyyy-mm-dd，而我需要 dd-mm-yyyy 格式。

583311 次浏览
小开

我不确定，但我认为这应该是由浏览器根据用户的日期/时间设置来处理的。尝试将计算机设置为以该格式显示日期。

小开

如果您正在使用 jQuery，这里有一个不错的简单方法

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

还有一种古老的传统方式:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
小开

日期值的格式为 'YYYY-MM-DD'

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

所有您需要的是格式化日期在 php，asp，Ruby 或任何有格式化。

小开

I found same question or related question on stackoverflow

Is there any way to change input type=“date” format?

I found one simple solution, You can not give particulate Format but you can customize Like this.

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

小开

为什么不使用 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"/>
小开

Clean implementation with no dependencies. 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>
小开 
$('input[type="date"]').change(function(){
alert(this.value.split("-").reverse().join("-"));
});
小开

我做了很多研究，我不认为一个可以强制格式的 <input type="date">。 浏览器选择本地格式，根据用户设置，如果用户的语言是英语，日期将显示为英语格式(mm/dd/yyyy)。

在我看来，最好的解决方案是使用插件来控制显示。

Jquery DatePicker 似乎是一个不错的选项，因为您可以强制 本地化、 日期格式..。

小开

简短的直接回答是没有或没有开箱即用，但我想出了一个方法，使用一个文本框和纯 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>

请注意，此方法只适用于支持日期类型的浏览器。

2-JS 代码中的第一个函数是针对不支持日期类型并将外观设置为普通文本输入的浏览器的。

3-如果你将在你的页面中使用这个代码进行多日期输入，请在函数调用和输入本身中将文本输入的 ID“ xTime”更改为其他内容，当然还要使用表单提交所需输入的名称。

4-在第二个函数中，你可以使用任何你想要的格式，而不是 day + “/”+ month + “/”+ year，例如 year + “/”+ month + “/”+ day。当页面加载时，在文本输入中使用占位符或值 yyyy/mm/dd 作为用户输入。

小开

我想出了一个与以上我读过的答案略有不同的答案。

我的解决方案使用了一小部分 JavaScript 和 html 输入。

输入接受的 Date 导致一个格式为‘ yyyy-mm-dd’的 String。我们可以分割它，并将其正确地放置为一个新的 Date ()。

Here is basic 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 ()’中输入日期的某些方式会产生意外的结果。(即落后一天)

小开

有关 mm-dd-yyyy的格式:

 aa = date.split("-")


date = aa[1]+'-'+aa[2]+'-'+aa[0]
小开

这是一个选择。当用户输入日期时，函数会重新格式化它。当他们单击提交按钮时，它将按照您要查找的格式填充结果 div。

<div id="result"></div>
<p>Enter some text:
<input type="date" name="txt" id="datefield" onchange="dateval(value)"></p>
<button onclick="postdate()">submit</button>


<script>
var a;


// Set the *value* of the input element to
// yyyy-mm-dd (text is unchanged)
function dateval(val) {
var dv = document.getElementById("datefield");
a = val.split("-").reverse().join("-");
dv.type = "text";
dv.value = a;
}


// Extract the yyyy-mm-dd value from the inpuut element,
// format it to dd-mm-yyyy and put it in the div
function postdate() {
var dv = document.getElementById("datefield");
var z = a.split("-").reverse().join("-");
document.getElementById("result").innerHTML = a;
dv.type = "date";
dv.value = z;
}
</script>
小开

Here is the solution: 

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


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

希望这能解决问题:)

小开

我们可以使用分割方法将 javascript 中的 yyyy-mm-dd 格式更改为 dd-mm-yyyy。

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

提交答案