默认情况下,输入type="date"显示日期为YYYY-MM-DD。

问题是,是否可能将其格式强制为:DD-MM-YYYY?


当前回答

我相信浏览器将使用本地日期格式。不要认为这是可能改变的。当然,您可以使用自定义日期选择器。

其他回答

我相信浏览器将使用本地日期格式。不要认为这是可能改变的。当然,您可以使用自定义日期选择器。

浏览器从用户的系统日期格式中获取日期输入格式。

(在支持的浏览器中测试,Chrome, Edge。)

由于目前还没有由规范定义的标准来改变日期控件的样式,因此不可能在浏览器中实现相同的功能。

用户可以在输入[type=date]的文本框中输入日期值,日期格式在框中显示为灰色文本。该格式从操作系统的设置中获得。Web作者没有办法更改日期格式,因为目前没有指定格式的标准。

所以不需要改变它,如果我们不改变任何东西,用户将看到日期输入的格式与他们在系统/设备设置中配置的相同,并且他们感到舒适或与他们的语言环境匹配。

记住,这只是用户在屏幕上看到的UI格式,在你的JavaScript/后端,你可以一直保持你想要的格式。

要在Chrome中更改格式(例如,从美式“MM/DD/YYYY”改为“DD/MM/YYYY”),请访问>设置>高级>添加语言(选择英语英国)。然后:

浏览器重新启动,你会发现日期输入字段是这样的:´25/01/2022

参考谷歌开发者页面。

WHATWG git hub查询相同

测试使用以下日期输入:

<输入类型=“日期” id=“dob” 值=“”/>

Angular开发者(也许还有其他人)可以考虑这个部分解决方案。

我的策略是检测输入字段的焦点状态,并相应地在日期和文本类型之间切换。明显的缺点是日期格式会随着输入焦点而改变。

这不是完美的,但确保了一个不错的一致性水平,特别是当你有一些日期显示为文本,也有一些日期输入在你的web应用程序。如果你只有一个日期输入,这不会是很有帮助的。

<input class="form-control"
       [type]="myInputFocus ? 'date' : 'text'"
       id="myInput"
       name="myInput"
       #myInput="ngModel"
       [(ngModel)]="myDate"
       (focus)="myInputFocus = true"
       (blur)="myInputFocus = false">

并且简单地在组件类的开头声明myInputFocus = false。 显然,将myDate指向所需的控件。

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,或者告诉你的客户端使用默认的日期格式