默认情况下，输入type="date"显示日期为YYYY-MM-DD。
问题是，是否可能将其格式强制为:DD-MM-YYYY?
当前回答
在阅读了大量的讨论之后，我准备了一个简单的解决方案，但我不想使用大量的Jquery和CSS，只是一些javascript。
HTML代码:
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
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;
}
输出:
其他回答
我在两年前搜索了这个问题，我的谷歌搜索再次把我带到了这个问题。 不要浪费时间试图用纯JavaScript处理这个问题。我把时间都浪费在日日夜夜的制作上了。没有适合所有浏览器的完整解决方案。所以我建议使用momentJS / jQuery datepicker，或者告诉你的客户端使用默认的日期格式
不是真的没有。
可破解但非常轻薄和可定制的解决方案将是:
隐藏日期输入(CSS可见性:隐藏)(仍然显示日历弹出) 在上面放一个文本输入 在文本输入中单击，使用JS获取日期输入元素并调用.showPicker() 将日期选择器值存储在其他地方 在文本输入中以您想要的自定义格式显示值
下面是一些react代码示例:
<div style={{ width: "100%", position: "relative" }}>
<input type="date" className={`form-control ${props.filters[dateFromAccessor] ? '' : 'bh-hasNoValue'}`} id={`${accessor}-date-from`} placeholder='from'
value={toDate(props.filters[dateFromAccessor])} style={{ marginRight: 0, visibility: "hidden" }}
onChange={e => {
props.setFilters({ ...props.filters, [dateFromAccessor]: inputsValueToNumber(e) })
}} />
<input type="text" className="form-control" readOnly
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "white" }}
value={toDate(props.filters[dateFromAccessor])}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
(document.getElementById(`${accessor}-date-from`) as any)?.showPicker();
}}></input>
</div>
如果你需要一个快速的解决方案，可以试试这个方法，让yyyy-mm-dd变成“dd- september -2016”
1)在您的输入附近创建一个span类(充当标签)
2)每次用户更改日期或需要从数据中加载时更新标签。
工作的webkit浏览器移动和指针事件的IE11+需要jQuery和jQuery日期
$("#date_input").on("change", function () { $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val())))); }); #date_input{text-indent: -500px;height:25px; width:200px;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <input id ="date_input" dateformat="d M y" type="date"/> <span class="datepicker_label" style="pointer-events: none;"></span>
我知道这是一个老帖子，但它是谷歌搜索的第一个建议，简短的答案不，推荐答案用户自定义日期选择器，我使用的正确答案是使用文本框来模拟日期输入，并做任何你想要的格式，这里是代码
<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, Edge。)
由于目前还没有由规范定义的标准来改变日期控件的样式，因此不可能在浏览器中实现相同的功能。
用户可以在输入[type=date]的文本框中输入日期值，日期格式在框中显示为灰色文本。该格式从操作系统的设置中获得。Web作者没有办法更改日期格式，因为目前没有指定格式的标准。
所以不需要改变它，如果我们不改变任何东西，用户将看到日期输入的格式与他们在系统/设备设置中配置的相同，并且他们感到舒适或与他们的语言环境匹配。
记住，这只是用户在屏幕上看到的UI格式，在你的JavaScript/后端，你可以一直保持你想要的格式。
要在Chrome中更改格式(例如，从美式“MM/DD/YYYY”改为“DD/MM/YYYY”)，请访问>设置>高级>添加语言(选择英语英国)。然后:
浏览器重新启动，你会发现日期输入字段是这样的:´25/01/2022
参考谷歌开发者页面。
WHATWG git hub查询相同
测试使用以下日期输入:
<输入类型=“日期” id=“dob” 值=“”/>
