Html HTML5,输入类型 datetime 与 datetime-local,我应该使用哪个?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7815232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5, input type datetime vs datetime-local, which should I use?
提问by AgelessEssence
I can't find more difference like on returned value...
我找不到更多的差异,比如返回值......
"2011-10-18T00:00:00.00Z" // datetime value
"2011-10-18T00:00:00.00" // datetime-local value
Am I missing something?
我错过了什么吗?
采纳答案by Adam
The difference between the two is that the datetime-local input does not include the time zone. If the time zone is not important to your application, use datetime-local.
两者的区别在于 datetime-local 输入不包括时区。如果时区对您的应用程序不重要,请使用 datetime-local。
Some browsers are still trying to catch up to the datetime input type. Firefox 7 has still not shown any progress in this area. Instead, set up your own using three select fields with options that are populated in relation to today's date. That gives you a lot more control over how it actually looks and behaves, and you won't run the risk of a lot of your users seeing only regular text fields and having to guess at how to enter information into them.
一些浏览器仍在尝试赶上 datetime 输入类型。Firefox 7 在这方面还没有显示出任何进展。相反,使用三个选择字段来设置您自己的字段,其中的选项根据今天的日期填充。这使您可以更好地控制它的实际外观和行为,并且您不会冒很多用户只看到常规文本字段而不得不猜测如何向其中输入信息的风险。
回答by Martin Vseticka
Update:W3C added type@datetime-local
back and dropped support for type@datetime
- browsers now render datetime as normal type text: see Why is HTML5 input type datetime removed from browsers already supporting it?
更新:W3Ctype@datetime-local
重新添加并删除了对type@datetime
- 浏览器现在将日期时间呈现为普通类型文本的支持:请参阅为什么从浏览器中删除了 HTML5 输入类型日期时间已经支持它?
Old answer for reference
旧答案供参考
I hope you did not chose datetime-local
. :-)
我希望你没有选择datetime-local
。:-)
W3C HTML has dropped input type@datetime-local; "little independent value & source of potential developer confusion"
W3C HTML 已删除 input type@datetime-local;“很少有独立价值和潜在的开发人员困惑的来源”
Source: https://twitter.com/html5/status/433038890937901056
来源:https: //twitter.com/html5/status/433038890937901056
History of the process is here: http://encosia.com/setting-the-value-of-a-datetime-local-input-with-javascript/
该过程的历史在这里:http: //encosia.com/setting-the-value-of-a-datetime-local-input-with-javascript/
There's been some confusing instability around
datetime
inputs as HTML5 has coalesced into a recommendation.Early on, the W3c HTML5 spec simply proposed a
datetime
input. Starting with iOS 5, Mobile Safari began displaying a UI for that input that matched the one you'd find in native apps. Other mobile browsers quickly followed suit.Later,
datetime
was removed from the HTML5 draft spec in favor of combining individual date and time inputs to prompt users for a date/time value with two separate inputs. While reducing the number of new input types makes some sense, it ignores the utility of showing the combined date/time widget that's already present and familiar on mobile devices.Next, the datetime-local input was added to the spec to replace the void that removing datetime left. The new input would be similar to the old one, but lacking the notion of a time zone offset.
In late 2014, the W3C decided to drop datetime-local from the recommendation HTML5 spec because it could lead to confusion. However, the dominant mobile browsers (i.e. Mobile Safari and Chrome) had already implemented datetime-local and made it a de facto standard. So, the w3C relented and added it back to the latest recommendation draft.
Adding to the confusion a bit more, Apple still lists both datetime and datetime-local as supported input types for iOS 5.0 and later. That's not exactly the case though. As of iOS 7, Mobile Safari started showing its native interface for datetime-local inputs and dropped support for datetime inputs at the same time. As with any input type that a browser doesn't have enhanced support for, datetime inputs started falling back to plain text type fields on iOS 7.
Long story short, you must use datetime-local for iOS 7+ (at least through the current version of 8.1.3 as I write this) and it's helpful to understand that the “local” means the input is time zone agnostic.
datetime
随着 HTML5 合并为推荐,输入方面存在一些令人困惑的不稳定性。早期,W3c HTML5 规范只是简单地提出了一个
datetime
输入。从 iOS 5 开始,Mobile Safari 开始为该输入显示与您在本机应用程序中找到的 UI 相匹配的 UI。其他移动浏览器也迅速效仿。后来,
datetime
从 HTML5 草案规范中删除,支持将单独的日期和时间输入组合起来,以提示用户输入具有两个单独输入的日期/时间值。虽然减少新输入类型的数量是有道理的,但它忽略了显示组合日期/时间小部件的效用,这些小部件已经存在并且在移动设备上很熟悉。接下来,将日期时间本地输入添加到规范中以替换删除日期时间留下的空白。新输入将类似于旧输入,但缺少时区偏移的概念。
2014 年底,W3C 决定从 HTML5 推荐规范中删除 datetime-local,因为它可能会导致混淆。然而,占主导地位的移动浏览器(即 Mobile Safari 和 Chrome)已经实现了 datetime-local 并使其成为事实上的标准。因此,w3C 做出了让步,并将其重新添加到最新的推荐草案中。
更令人困惑的是,Apple 仍然将 datetime 和 datetime-local 列为 iOS 5.0 及更高版本支持的输入类型。但事实并非如此。从 iOS 7 开始,Mobile Safari 开始显示用于日期时间本地输入的本机界面,并同时放弃了对日期时间输入的支持。与浏览器没有增强支持的任何输入类型一样,日期时间输入开始回落到 iOS 7 上的纯文本类型字段。
长话短说,您必须对 iOS 7+ 使用 datetime-local(至少在我撰写本文时通过当前版本的 8.1.3),理解“本地”意味着输入与时区无关会很有帮助。
回答by Konstantin Breu
Have a look at the HTML5 date input fields at iOS5, or at Google Chrome for Android, it is pretty cool. Both have support for the types date, datetime, datetime-local, time, month, only week is missing. Especially for mobile/touch clients the support of the new input times is quite important. For my application I will show a js/html based calendar (like dynarch) or the html5 input field depending on the client.
看看 iOS5 上的 HTML5 日期输入字段,或者 Google Chrome for Android,它非常酷。两者都支持 date、datetime、datetime-local、time、month 类型,仅缺少周。特别是对于移动/触摸客户端,新输入时间的支持非常重要。对于我的应用程序,我将根据客户端显示基于 js/html 的日历(如 dynarch)或 html5 输入字段。
回答by youngrrrr
Here's a more recent (from Apr. 23, 2017) and definitive answer (in bold), per MDN:
这是每个 MDN 的更新(来自 2017 年 4 月 23 日)和明确的答案(粗体):
<input type="datetime">
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
The HTML was a control for entering a date and time (hour, minute, second, and fraction of a second) as well as a timezone. This feature has been removed from WHATWG HTML, and is no longer supported in browsers.
Instead, browsers are implementing (and developers are encouraged to use) the datetime-local input type.
<input type="datetime">
过时的
此功能已过时。尽管它可能在某些浏览器中仍然有效,但不鼓励使用它,因为它可以随时被删除。尽量避免使用它。
HTML 是用于输入日期和时间(小时、分钟、秒和秒的分数)以及时区的控件。此功能已从 WHATWG HTML 中删除,并且不再受浏览器支持。
相反,浏览器正在实现(并鼓励开发人员使用)日期时间本地输入类型。
回答by n. harrison
The code below shows a calendar from an input box in all browsers. Paste code in head of page.
下面的代码显示了所有浏览器中输入框的日历。在页面头部粘贴代码。
<link ref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({ dateFormat: "mm-dd-yy" }).val()
});
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function() {
$(".ui-datepicker").css('font-size', 12)
}
});
</script>
<style>
div.ui-datepicker, .ui-datepicker input {
font-size:35%;
line-height: .6;
}
</style>