如何在 HTML 日期输入标签中设置日期格式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6978631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set date format in HTML date input tag?
提问by Piotr
I am wondering whether it is possible to set the date format in the html <input type="date"></input>tag... Currently it is yyyy-mm-dd, while I need it in the dd-mm-yyyy format.
我想知道是否可以在html<input type="date"></input>标签中设置日期格式......目前它是yyyy-mm-dd，而我需要dd-mm-yyyy格式。
回答by Stewart
You don't.
你没有。
Firstly, your question is ambiguous - do you mean the format in which it is displayed to the user, or the format in which it is transmitted to the web server?
首先，您的问题是模棱两可的 - 您是指向用户显示的格式，还是将其传输到 Web 服务器的格式？
If you mean the format in which it is displayed to the user, then this is down to the end-user interface, not anything you specify in the HTML. Usually, I would expect it to be based on the date format that it is set in the operating system locale settings. It makes no sense to try to override it with your own preferred format, as the format it displays in is (generally speaking) the correct one for the user's locale and the format that the user is used to writing/understanding dates in.
如果您指的是向用户显示的格式，那么这取决于最终用户界面，而不是您在 HTML 中指定的任何内容。通常，我希望它基于在操作系统区域设置中设置的日期格式。尝试用您自己的首选格式覆盖它是没有意义的，因为它显示的格式（一般来说）是用户语言环境的正确格式以及用户用来书写/理解日期的格式。
If you mean the format in which it's transmitted to the server, you're trying to fix the wrong problem. What you need to do is program the server-side code to accept dates in yyyy-mm-dd format.
如果您指的是传输到服务器的格式，那么您正在尝试解决错误的问题。您需要做的是编写服务器端代码以接受 yyyy-mm-dd 格式的日期。
回答by ashish bhatt
I found same question or related question on stackoverflow
我在 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 Code:
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 Code:
CSS 代码：
#dt{text-indent: -500px;height:25px; width:200px;}
Javascript Code :
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;
}
Output:
输出：
回答by sean.boyer
If you're using jQuery, here's a nice simple method
如果你使用 jQuery，这里有一个很好的简单方法
$("#dateField").val(new Date().toISOString().substring(0, 10));
Or there's the old traditional way:
或者有旧的传统方式：
document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
回答by Paul I.E
Why not use the html5 date control as it is, with other attributes that allows it work ok on browsers that support date type and still works on other browsers like firefox that is yet to support date type
为什么不按原样使用 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"/>
回答by Rathika Jeganathan
I think so, in HTML there is no syntax for DD-MM-YYYY format. Refer this page http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm. Somewhat it will help you. Else use javascript date picker.
我认为是这样，在 HTML 中没有 DD-MM-YYYY 格式的语法。请参阅此页面http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm。在某种程度上它会帮助你。否则使用 javascript 日期选择器。
回答by Syntax Error
I don't know this for sure, but I think this is supposed to be handled by the browser based on the user's date/time settings. Try setting your computer to display dates in that format.
我不确定这一点，但我认为这应该由浏览器根据用户的日期/时间设置来处理。尝试将计算机设置为以该格式显示日期。
回答by Dheeraj Rao
$('input[type="date"]').change(function(){
alert(this.value.split("-").reverse().join("-"));
});
回答by Fifi
I made a lot of research and I don't think one can force format of the <input type="date">.
The browser select the local format, and depending on user settings, if the user's language is in English, the date will be displayed to the English format (mm/dd/yyyy).
我做了很多研究，我认为不能强制<input type="date">. 浏览器选择本地格式，根据用户设置，如果用户语言为英文，日期将显示为英文格式（mm/dd/yyyy）。
In my opinion, the best solution is to use a plugin to control the display.
在我看来，最好的解决方案是使用插件来控制显示。
Jquery DatePickerseems a good option since you can force the localization, date format...
Jquery DatePicker似乎是一个不错的选择，因为您可以强制本地化、日期格式...
回答by thielr7
I came up with a slightly different answer than anything above that I've read.
我想出了一个与我读过的以上任何内容略有不同的答案。
My solution uses a small bit of JavaScript and an html input.
我的解决方案使用了少量 JavaScript 和一个 html 输入。
The Date accepted by an input results in a String formatted as 'yyyy-mm-dd'. We can split it and place it properly as a new Date().
输入接受的日期产生格式为“yyyy-mm-dd”的字符串。我们可以拆分它并将其作为新的 Date() 正确放置。
Here is basic 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>
Here is basic JS:
这是基本的JS：
let userDate = document.getElementById('userDate').value.split('-'),
parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));
You can format the date any way you like. You can create a new Date() and grab all the info from there... or simply use 'userDate[]' to build your string.
您可以按自己喜欢的任何方式格式化日期。您可以创建一个新的 Date() 并从那里获取所有信息......或者简单地使用 'userDate[]' 来构建您的字符串。
Keep in mind, some ways that a date is entered into 'new Date()' produces an unexpected result. (ie - one day behind)
请记住，将日期输入到“new Date()”中的某些方式会产生意想不到的结果。（即 - 落后一天）
回答by pala dattadri
<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>
