Javascript 对于输入类型=日期，将日期显示为 dd-mm-yyyy 格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45853840/
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
Display date as dd-mm-yyyy format for input type=date
提问by HariPriya
I have my code :
我有我的代码：
<input type="date" class="form-control" id="training_date"
name="training_date" placeholder=" select" value=""
onfocus="(this.type='date')"
onfocusout="(this.type='date')" max=<?php echo date('Y-m-d'); ?>>
I need to display my date in following date-format dd-mm-yyyyformat in the textbox.
我需要显示我在以下日期格式的日期DD-MM-YYYY格式textbox。
回答by Devaux
What I would recommend is to make a array with the 12 months of the year (because the will never change)
我建议的是用一年中的 12 个月制作一个数组（因为永远不会改变）
_currentDate() {
var date = new Date();
for (var i = 0; this.months.length > i; i++) {
if (date.getMonth() === i) {
var displayMonth = this.months[i].month;
}
}
var displayDate = date.getDate() + ' ' + displayMonth + ' ' + date.getFullYear();
return displayDate;
}
Use the value that you return in your function you just need to insert where you want to display it so in your case your input
使用您在函数中返回的值，您只需要插入要显示它的位置，以便在您的情况下输入
Hope this helps :)
希望这可以帮助 ：）
回答by Om Sao
Please note: <input type="date">is not supported in IE and Firefox. Hence, it's not good idea to implement it in as it's against robust UI/UX design, and might invite later bugs.
You should use jquery's datepicker, moment.js or combination of both to achieve your requirement.
请注意：<input type="date">在 IE 和 Firefox 中不支持。因此，实现它并不是一个好主意，因为它违背了健壮的 UI/UX 设计，并且可能会导致以后的错误。您应该使用 jquery 的 datepicker、moment.js 或两者的组合来实现您的要求。
To close the question and provide what can be done and tested. Here is implementation.
结束问题并提供可以完成和测试的内容。这里是实现。
In this example:
在这个例子中：
- I am assigning today's date to
<input type="date">by forming a date string inyyyy-mm-ddformat and setting attributevalue - whenever I am changing the the date in
#datepicker, I am forming a date string in dd-mm-yyyy format and providing it as value to#textbox
- 我
<input type="date">通过在yyyy-mm-dd格式和设置属性中形成日期字符串来分配今天的日期value - 每当我更改 中的日期时
#datepicker，我都会以 dd-mm-yyyy 格式形成一个日期字符串并将其作为值提供给#textbox
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var d = new Date();
function twoDigitDate(d){
return ((d.getDate()).toString().length == 1) ? "0"+(d.getDate()).toString() : (d.getDate()).toString();
};
function twoDigitMonth(d){
return ((d.getMonth()+1).toString().length == 1) ? "0"+(d.getMonth()+1).toString() : (d.getMonth()+1).toString();
};
var today_ISO_date = d.getFullYear()+"-"+twoDigitMonth(d)+"-"+twoDigitDate(d); // in yyyy-mm-dd format
document.getElementById('datepicker').setAttribute("value", today_ISO_date);
var dd_mm_yyyy;
$("#datepicker").change( function(){
changedDate = $(this).val(); //in yyyy-mm-dd format obtained from datepicker
var date = new Date(changedDate);
dd_mm_yyyy = twoDigitDate(date)+"-"+twoDigitMonth(date)+"-"+date.getFullYear(); // in dd-mm-yyyy format
$('#textbox').val(dd_mm_yyyy);
//console.log($(this).val());
//console.log("Date picker clicked");
});
});
</script>
</head>
<body>
<div style="width: 50%;height:50px; float:left;">
Enter your Birthday!!:<br>
<input id="datepicker" type="date" name="bday" style="margin-bottom: 200px;"></br><br>
</div>
<div style="width: 50%;height:50px; float:right;">
Date chosen(dd-mm-yyyy):<br>
<input id="textbox" type="text" value="dd-mm-yyyy"></input>
</div>
</br></br></br></br></br></br>
<p><strong>Note:</strong> type="date" is not supported in Firefox, or Internet Explorer 11 and earlier versions.</p>
</body>
</html>回答by Amit Narayan
You can use the below code to achieve this.
您可以使用以下代码来实现这一点。
<input type="date" class="form-control" id="training_date" name="training_date" placeholder=" select" value="" onfocus="(this.type='date')" onfocusout="(this.type='date')" pattern="\d{1,2}/\d{1,2}/\d{4}" >