有没有办法改变输入类型 =“日期”格式 (input type date format dd mm yyyy)

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

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

问题是,是否可以强制它的格式为:DD-MM-YYYY

759

无法更改格式

我们必须区分线上格式和浏览器的演示格式。

导线格式

HTML5 date input specification是指RFC 3339 specification,它指定的完整日期格式等于:yyyy-mm-dd。有关更多详细信息,请参阅 RFC 3339 规范的section 5.6

此格式由valueHTML 属性和 DOM 属性使用,并且是在执行普通表单提交时使用的格式。

演示文稿格式

浏览器呈现日期输入的方式不受限制。在编写 Chrome 时,Edge 、 Firefox 和 Opera 都有日期支持 (请参阅here)。它们都显示日期选择器并在输入字段中格式化文本。

桌面设备

对于 Chrome,Firefox 和 Opera,输入字段的文本格式基于浏览器的语言设置。对于 Edge,它基于 Windows 语言设置。可悲的是,所有 Web 浏览器都忽略了操作系统中配置的日期格式。对我来说,这是非常奇怪的行为,并且在使用此输入类型时需要考虑一些因素。例如,将其操作系统或浏览器语言设置为en-us的荷兰用户将显示为1。

Internet Explorer 9 、 10 和 11 将显示具有线格式的文本输入字段。

移动设备

特别是对于 Android 上的 Chrome,格式基于 Android 显示语言。我怀疑其他浏览器也是如此,尽管我无法验证这一点。

178

由于这个问题被问到,在网络领域发生了很多事情,其中最令人兴奋的是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 年,所以很有可能它肯定会覆盖你的大多数用户。

希望有帮助!

107

正如前面提到的,正式不可能更改格式。但是可以设置字段的样式,因此 (在一些 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 上失败。

58
It's important to distinguish two different formats:

RFC 3339 / ISO 8601“wire format”:YYYY-MM-DD。根据 HTML5 规范,这是表单提交或通过 DOM API 请求时必须用于输入值的格式。它与区域设置和区域无关。

由用户界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的首选项选择。例如,在“语言和文本”首选项窗格中选择了“美国”区域的 Mac OS 上,Chrome 20 使用“m / d / yy”格式。

HTML5 规范不包括任何重写或手动指定任一格式的方法。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(487)
Azure条件访问不能包括或排除用户
上一篇
用于将联系人添加到whatsapp的HTML链接
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(26条)