默认情况下,输入type="date"
将日期显示为YYYY-MM-DD
。
问题是,是否可以强制它的格式为:DD-MM-YYYY
?
无法更改格式
我们必须区分线上格式和浏览器的演示格式。
导线格式
HTML5 date input specification是指RFC 3339 specification,它指定的完整日期格式等于:yyyy-mm-dd
。有关更多详细信息,请参阅 RFC 3339 规范的section 5.6。
此格式由value
HTML 属性和 DOM 属性使用,并且是在执行普通表单提交时使用的格式。
演示文稿格式
浏览器呈现日期输入的方式不受限制。在编写 Chrome 时,Edge 、 Firefox 和 Opera 都有日期支持 (请参阅here)。它们都显示日期选择器并在输入字段中格式化文本。
桌面设备
对于 Chrome,Firefox 和 Opera,输入字段的文本格式基于浏览器的语言设置。对于 Edge,它基于 Windows 语言设置。可悲的是,所有 Web 浏览器都忽略了操作系统中配置的日期格式。对我来说,这是非常奇怪的行为,并且在使用此输入类型时需要考虑一些因素。例如,将其操作系统或浏览器语言设置为en-us
的荷兰用户将显示为1。
Internet Explorer 9 、 10 和 11 将显示具有线格式的文本输入字段。
移动设备
特别是对于 Android 上的 Chrome,格式基于 Android 显示语言。我怀疑其他浏览器也是如此,尽管我无法验证这一点。
由于这个问题被问到,在网络领域发生了很多事情,其中最令人兴奋的是web components的着陆。现在,您可以使用适合您需求的custom HTML5 element优雅地解决此问题。如果您希望覆盖 / 更改任何 html 标签的工作方式,只需使用 dom构建您的标签即可。
好消息是,已经有很多样板可用,所以很可能你不需要从头开始想出一个解决方案。只是check人们正在构建什么,并从那里获得想法。
您可以从一个简单的(和工作)解决方案开始,如datetime-input聚合物,允许您使用这样的标签:
<date-input date="{{date}}" timezone="[[timezone]]"></date-input>
或者你可以得到创意和弹出完整的日期选择器styled as you wish,格式和区域设置你的愿望,回调,和你的选项长列表(你有一个完整的自定义 API 在您的处置!)
符合标准,无黑客攻击。
仔细检查available polyfills,它们支持什么browsers/versions,如果它覆盖了你的用户群的足够%……现在是 2018 年,所以很有可能它肯定会覆盖你的大多数用户。
希望有帮助!
正如前面提到的,正式不可能更改格式。但是可以设置字段的样式,因此 (在一些 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-on, input::-webkit-clear-on {
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 上的 Safari 上运行良好(特别理想,因为触摸屏上的本地日期操纵器是无与伦比的 IMHO)。没有检查其他人,但不要期望在任何 Webkit 上失败。
RFC 3339 / ISO 8601“wire format”:YYYY-MM-DD。根据 HTML5 规范,这是表单提交或通过 DOM API 请求时必须用于输入值的格式。它与区域设置和区域无关。
由用户界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的首选项选择。例如,在“语言和文本”首选项窗格中选择了“美国”区域的 Mac OS 上,Chrome 20 使用“m / d / yy”格式。
HTML5 规范不包括任何重写或手动指定任一格式的方法。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(26条)