Javascript 在输入字段中使用 dd/mm/yyyy 输入日期格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50545478/
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
Input date format with dd/mm/yyyy in the input field
提问by IkePr
I have a classic HTML date input: <input type="date" name="dto" id="date_timepicker_end">
我有一个经典的 HTML 日期输入： <input type="date" name="dto" id="date_timepicker_end">
Now I need to change this format to be dd/mm/yyyy, and I know I can't change that in html.
现在我需要将此格式更改为dd/mm/yyyy，我知道我无法在 html 中更改它。
When I add the jQuery datepicker I just get a blank input form where you can type any number you want:
当我添加 jQuery datepicker 时，我只会得到一个空白的输入表单，您可以在其中键入任何您想要的数字：
I need the input to be just like the HTML input, where the user clicks on the input and can just change the value according to what he clicked. I don't want him to be able to write any random number.
我需要输入就像 HTML input 一样，用户点击输入并且可以根据他点击的内容更改值。我不希望他能够写出任何随机数。
Also note, this is all custom code in a wordpress theme, so I have jquery and my custom javascript and css. I can't add libraries like moment.js and so on...
另请注意，这是 wordpress 主题中的所有自定义代码，所以我有 jquery 和我的自定义 javascript 和 css。我无法添加像 moment.js 之类的库...
What is the best solution for this problem ? I know it has been asked a lot of times, but none of those methods work me for because I need the input field to be like a normal HTML input date field, not an empty input, dd/mm/yyyy instead if mm/dd/yyyy.
这个问题的最佳解决方案是什么？我知道它已经被问了很多次，但这些方法都没有为我工作，因为我需要输入字段像一个普通的 HTML 输入日期字段，而不是一个空输入，dd/mm/yyyy 代替如果 mm/dd /年年。
jsfiddle: https://jsfiddle.net/t4zrrvgL/
jsfiddle：https://jsfiddle.net/t4zrrvgL/
回答by Takit Isy
As you already know, you can't change the value format in an input type="date".
如您所知，您无法更改input type="date".
The input type="date"uses a localized displaying format,
but its value is formatted like this: “YYYY-MM-DD”.
(Doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
在input type="date"使用本地化的显示格式，
但它的价值的格式是这样的：“YYYY-MM-DD”。
（文档：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date）
Instead of trying to modify or use a pattern on the inputof the datepicker,
I tried to use the regular input type="date"to work with the datepicker.
而不是试图修改或使用上的图案input的datepicker，
我试图用常规的input type="date"工作与datepicker。
The datepickerhas got a dateFormatoption.
It seems that “yy-mm-dd” matches the format required by the input type="date".
Using that, I ended-up with a localized datepickerin an easy way:
在datepicker得到了一个dateFormat选项。
似乎“yy-mm-dd”与input type="date".
使用它，我最终datepicker以一种简单的方式进行了本地化：
// Use datepicker on the date inputs
$("input[type=date]").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
$(inst).val(dateText); // Write the value in the input
}
});
// Code below to avoid the classic date-picker
$("input[type=date]").on('click', function() {
return false;
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="date">Hope it helps.
希望能帮助到你。
回答by RavianXReaver
you can change the date tag to:
您可以将日期标签更改为：
<input type="date" id="myDate" max="2222-05-26">
This won't allow the users to enter more than 4 chars on year field. Also it doesn't really matter what they enter though, you can always perform Client-server side validations.
这将不允许用户在年份字段中输入超过 4 个字符。此外，他们输入的内容并不重要，您始终可以执行客户端-服务器端验证。
回答by Kgn-web
Add readonly attribute to your html tag. This is restrict the user to enter the input.
将 readonly 属性添加到您的 html 标签。这是限制用户输入的内容。
<input type="text" name="dto" id="date_timepicker_end" readonly>
As you're using jQuery datepicker, it has option availble to specify the date format that you want to have.
当您使用 jQuery datepicker 时，它可以选择指定您想要的日期格式。
$("#date_timepicker_end").datepicker()
{
"dateFormat" : "dd-mm-yyyy" //any valid format that you want to have
});
Hope this helps!!
希望这可以帮助！！
回答by shady
I have come up with a method of using a text box to simulate the date input and do any format you want, here is the code
我想出了一种使用文本框来模拟日期输入并执行您想要的任何格式的方法，这是代码
<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- please note that this method only work for browser that support date type.
1- 请注意，此方法仅适用于支持日期类型的浏览器。
2- the first function in JS code is for browser that don't support date type and set the look to a normal text input.
2- JS 代码中的第一个功能是针对不支持日期类型并将外观设置为普通文本输入的浏览器。
3- if you will use this code for multiple date inputs in your page please change the ID "xTime" of the text input in both function call and the input itself to something else and of course use the name of the input you want for the form submit.
3- 如果您将此代码用于页面中的多个日期输入，请将函数调用和输入本身中文本输入的 ID“xTime”更改为其他内容，当然使用您想要的输入名称表单提交。
4-on the second function you can use any format you want instead of day+" / "+month+" / "+year for example year+" / "+month+" / "+day and in the text input use a placeholder or value as yyyy / mm / dd for the user when the page load.
4-在第二个函数上，您可以使用任何您想要的格式，而不是 day+" / "+month+" / "+year for example year+" / "+month+" / "+day 并且在文本输入中使用占位符或值作为yyyy / mm / dd 为用户加载页面时。
