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

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


当前回答

不是真的没有。

可破解但非常轻薄和可定制的解决方案将是:

隐藏日期输入(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>

其他回答

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

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

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

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

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

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

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

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

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

参考谷歌开发者页面。

WHATWG git hub查询相同

测试使用以下日期输入:

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

我找到了一种改变格式的方法,这是一个棘手的方法,我只是用CSS代码改变了日期输入字段的外观。

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button { color: #fff; position: relative; } input[type="date"]::-webkit-datetime-edit-year-field{ position: absolute !important; border-left:1px solid #8c8c8c; padding: 2px; color:#000; left: 56px; } input[type="date"]::-webkit-datetime-edit-month-field{ position: absolute !important; border-left:1px solid #8c8c8c; padding: 2px; color:#000; left: 26px; } input[type="date"]::-webkit-datetime-edit-day-field{ position: absolute !important; color:#000; padding: 2px; left: 4px; } <input type="date" value="2019-12-07">

Firefox的新版本(未知版本),在设置>语言中,他们增加了一个选项:使用您的操作系统设置“西班牙语(西班牙)”来格式化日期、时间、数字和测量

这个选项将使用操作系统的区域设置来显示日期!太糟糕了,它不是默认启用的(也许从一个新的安装它?)

如前所述,官方不可能更改格式。然而,它可以对字段设置样式,因此(在一点JS的帮助下)它以我们想要的格式显示日期。这样就失去了操作日期输入的一些可能性,但如果强制使用格式的愿望更强烈,那么这种解决方案可能是一种方法。日期字段只保持这样:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

剩下的是一些CSS和JS: http://jsfiddle.net/g7mvaosL/

$("input").on("change", function() { this.setAttribute( "data-date", moment(this.value, "YYYY-MM-DD") .format( this.getAttribute("data-date-format") ) ) }).trigger("change") input { position: relative; width: 150px; height: 20px; color: white; } input:before { position: absolute; top: 3px; left: 3px; content: attr(data-date); display: inline-block; color: black; } input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button { display: none; } input::-webkit-calendar-picker-indicator { position: absolute; top: 3px; right: 0; color: black; opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

它在台式机的Chrome上运行得很好,在iOS上运行得很好(尤其可取,因为在触摸屏上的本机日期操纵器是无敌的)。没有检查其他的,但是不要期望在任何Webkit上失败。