默认情况下,输入type="date"显示日期为YYYY-MM-DD。
问题是,是否可能将其格式强制为:DD-MM-YYYY?
默认情况下,输入type="date"显示日期为YYYY-MM-DD。
问题是,是否可能将其格式强制为:DD-MM-YYYY?
当前回答
const birthday = document.getElementById("birthday"); const button = document.getElementById("wishBtn"); 按钮。addEventListener("click", () => { let dateValue = birthday.value; //改变格式:) dateValue = dateValue.split(“-”).reverse () . join(“-”); alert('生日快乐的国王/皇后${dateValue} '); }); <input type="date" id="birthday" name="birthday" value="2022-10-10"/> <button id="wishBtn">点击我</button>
其他回答
我在两年前搜索了这个问题,我的谷歌搜索再次把我带到了这个问题。 不要浪费时间试图用纯JavaScript处理这个问题。我把时间都浪费在日日夜夜的制作上了。没有适合所有浏览器的完整解决方案。所以我建议使用momentJS / jQuery datepicker,或者告诉你的客户端使用默认的日期格式
这是不可能改变web-kit浏览器使用用户的电脑或手机的默认日期格式。 但是如果你可以使用jquery和jquery UI,有一个日期选择器是可设计的,可以显示在任何格式的开发人员想要的。 jquery UI日期选择器的链接是 在这个页面http://jqueryui.com/datepicker/上,您可以找到演示以及代码和文档或文档链接
编辑:-我发现chrome使用的语言设置默认等于系统设置,但用户可以改变他们,但开发人员不能强迫用户这样做,所以你必须使用其他js解决方案,就像我告诉你可以搜索网页查询像javascript日期选择器或jquery日期选择器
我知道这是一个老帖子,但它是谷歌搜索的第一个建议,简短的答案不,推荐答案用户自定义日期选择器,我使用的正确答案是使用文本框来模拟日期输入,并做任何你想要的格式,这里是代码
<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-如果你将在你的页面中使用此代码进行多个日期输入,请在函数调用和输入本身中更改文本输入的ID“xTime”,当然,使用你想要的表单提交的输入名称。
4-在第二个函数中,你可以使用任何你想要的格式,而不是日+" / "+月+" / "+年,例如年+" / "+月+" / "+日,在文本输入中使用占位符或值作为页面加载时用户的yyyy / mm / dd。
谷歌Chrome在最近的测试版中最终使用了输入type=date,格式为DD-MM-YYYY。
因此,必须有一种方法来强制使用特定的格式。我正在开发一个HTML5网页,日期搜索现在失败与不同的格式。
如上所述,<input type=date…>在大多数浏览器中都没有完全实现,所以让我们来谈谈webkit之类的浏览器(chrome)。
使用linux,您可以通过更改环境变量LANG, LC_TIME似乎不起作用(至少对我来说)。
您可以在终端中键入locale以查看当前值。我认为同样的理念也适用于IOS。
例如: 使用:
LANG=en_US.UTF-8 /opt/google/chrome/chrome
日期显示为mm/dd/yyyy
使用:
LANG=pt_BR /opt/google/chrome/chrome
日期显示为dd/mm/yyyy
您可以使用http://lh.2xlibre.net/locale/pt_BR/(根据您的语言环境更改pt_BR)来创建您自己的自定义语言环境并按照您想要的格式设置日期。
关于如何更改默认系统日期的一个更高级的参考是: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ 而且 https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale
你可以看到你的真实当前日期格式使用date:
$ date +%x
01-06-2015
但是LC_TIME和d_fmt似乎被chrome拒绝了(我认为这是webkit或chrome中的一个bug),遗憾的是它不起作用。: ' (
所以,不幸的是,如果LANG环境变量不能解决你的问题,还没有办法。