默认情况下,输入type="date"显示日期为YYYY-MM-DD。
问题是,是否可能将其格式强制为:DD-MM-YYYY?
默认情况下,输入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>
其他回答
不是真的没有。
可破解但非常轻薄和可定制的解决方案将是:
隐藏日期输入(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>
感谢@safi eddine和@真主党Shah
Datepicker与VanillaJS和CSS。
CSS样式:
/*================== || Date Picker ||=======================================================================================*/
/*-------Removes the // Before dd - day------------------------*/
input[type="date"]::-webkit-datetime-edit-text
{
color: transparent;
}
/*------- DatePicker ------------------------*/
input[type="date"] {
background-color: aqua;
border-radius: 4px;
border: 1px solid #8c8c8c;
font-weight: 900;
}
/*------- DatePicker - Focus ------------------------*/
input[type="date"]:focus
{
outline: none;
box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}
input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
color: #fff;
position: relative;
}
/*------- Year ------------------------*/
input[type="date"]::-webkit-datetime-edit-year-field {
position: absolute !important;
border-left: 1px solid #8c8c8c;
padding: 2px;
color: #000;
left: 56px;
}
/*------- Month ------------------------*/
input[type="date"]::-webkit-datetime-edit-month-field {
position: absolute !important;
border-left: 1px solid #8c8c8c;
padding: 2px;
color: #000;
left: 26px;
}
/*------- Day ------------------------*/
input[type="date"]::-webkit-datetime-edit-day-field {
position: absolute !important;
color: #000;
padding: 2px;
left: 4px;
}
JAVASCRIPT:
// ================================ || Format Date Picker || ===========================================================
function GetFormatedDate(datePickerID)
{
let rawDate = document.getElementById(datePickerID).value; // Get the Raw Date
return rawDate.split('-').reverse().join("-"); // Reverse the date
}
使用:
document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID
我在两年前搜索了这个问题,我的谷歌搜索再次把我带到了这个问题。 不要浪费时间试图用纯JavaScript处理这个问题。我把时间都浪费在日日夜夜的制作上了。没有适合所有浏览器的完整解决方案。所以我建议使用momentJS / jQuery datepicker,或者告诉你的客户端使用默认的日期格式
如上所述,<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环境变量不能解决你的问题,还没有办法。
浏览器从用户的系统日期格式中获取日期输入格式。
(在支持的浏览器中测试,Chrome, Edge。)
由于目前还没有由规范定义的标准来改变日期控件的样式,因此不可能在浏览器中实现相同的功能。
用户可以在输入[type=date]的文本框中输入日期值,日期格式在框中显示为灰色文本。该格式从操作系统的设置中获得。Web作者没有办法更改日期格式,因为目前没有指定格式的标准。
所以不需要改变它,如果我们不改变任何东西,用户将看到日期输入的格式与他们在系统/设备设置中配置的相同,并且他们感到舒适或与他们的语言环境匹配。
记住,这只是用户在屏幕上看到的UI格式,在你的JavaScript/后端,你可以一直保持你想要的格式。
要在Chrome中更改格式(例如,从美式“MM/DD/YYYY”改为“DD/MM/YYYY”),请访问>设置>高级>添加语言(选择英语英国)。然后:
浏览器重新启动,你会发现日期输入字段是这样的:´25/01/2022
参考谷歌开发者页面。
WHATWG git hub查询相同
测试使用以下日期输入:
<输入类型=“日期” id=“dob” 值=“”/>