Datetimes在页面底部提供了一个选择器界面，方便用户选择日期和时间。选择器显示可滚动的列，可用于单独选择年、月、日、小时和分钟的值。日期时间类似于本机时间
输入
元素的类型
datetime-local
但是，Ionic的Dabetway东盟体育apptetime组件可以轻松地以首选格式显示日期和时间，并管理Datetime值。
显示和选择器格式<！--t.146.24.5.2-->
datetime组件在两个地方显示值
< ion-datetime >
组件，并在屏幕底部显示的选择器接口中。下面的图表列出了所有可以使用的格式。
| 格式 | 描述 | 例子 |
|---|---|---|
YYYY |
年,4位数 |
2018 |
YY |
年,2位数 |
18 |
米 |
月 |
1
.．.
12 |
毫米 |
月,前导零 |
01
.．.
12 |
嗯 |
月,短名称 |
1月 |
嗯 |
月,全名 |
1月 |
D |
一天 |
1
.．.
31 |
DD |
天,前导零 |
01
.．.
31 |
DDD |
天,短名称 |
星期五 |
DDDD |
天,全名 |
星期五 |
H |
小时,24小时 |
0
.．.
23 |
HH |
小时，24小时，前导0 |
00
.．.
23 |
h |
小时,12小时 |
1
.．.
12 |
hh |
1小时，12小时，前导0 |
01
.．.
12 |
一个 |
12小时的时间段，小写 |
我
点 |
一个 |
12小时的时间段，大写 |
我
点 |
米 |
一分钟 |
1
.．.
59 |
毫米 |
分钟,前导零 |
01
.．.
59 |
年代 |
第二个 |
1
.．.
59 |
党卫军 |
第二,前导零 |
01
.．.
59 |
Z |
UTC时区偏移 |
Z或+HH:mm或-HH:mm |
重要的 :看到了<年代tencil-route-link class="hydrated" c-id="146.391.5.2" s-id="158"> 月份名称和星期名称 关于如何使用月和日的不同名称的章节。
显示格式<！--t.146.399.5.2-->
的
displayFormat
属性指定如何在datetime组件内以格式化文本的形式打印datetime的值。
下面的图表提供了一些例子。上述格式可以通过任何组合传递到显示格式。
| 显示格式 | 例子 |
|---|---|
M-YYYY |
6 - 2005 |
MM / YY |
06/05 |
嗯YYYY |
2005年6月 |
YYYY,嗯 |
2005年6月 |
MMM DD, YYYY HH:mm |
2005年6月17日11:06 |
重要的
：
ion-datetime
默认情况下将显示相对于用户时区的值。给定的值
09:00:00 + 01:00
， datetime组件将显示为
04:00:00-04:00
对于在
内
时区偏移。要将显示更改为使用不同的时区，请使用下面描述的displayTimezone属性。
显示时区<！--t.146.502.5.2-->
的
displayTimezone
属性允许更改相对于用户的本地时区显示值的默认行为。除了“UTC”之外，有效的时区值是由浏览器确定的，并且在大多数情况下跟随的时区名称<一个href="https://www.iana.org/time-zones" c-id="146.509.5.3">
IANA时区数据库<！--t.146.511.5.4-->，如“亚洲/上海”、“亚洲/加尔各答”、“美国/纽约”。示例如下:
<
ion-datetime
价值
＝
＂
2019 - 10 - 01 - t15:43:40.394z<年代pan class="token punctuation" c-id="146.531.9.3">
＂
display-timezone
＝
＂
utc<年代pan class="token punctuation" c-id="146.542.9.3">
＂
>
ion-datetime
>显示的值将不会转换，并将按照提供的(UTC)显示。
选择格式<！--t.146.562.5.2-->
的
pickerFormat
属性确定应该在选择器接口中显示哪些列、列的顺序以及在每个列中使用哪种格式。如果
pickerFormat
是不是提供了那么它会使用的价值呢
displayFormat
．参考图表中的<年代tencil-route-link class="hydrated" c-id="146.575.5.7" s-id="160">
显示格式
部分给出一些格式示例。
Datetime数据<！--t.146.583.5.2-->
过去，在JavaScript甚至HTML输入中处理datetime值一直是一个挑战。具体来说,JavaScript的
日期
对象是出了名的难以正确地分开解析日期时间字符串或格式化日期时间值。更糟糕的是，不同的浏览器和JavaScript版本会以不同的方式解析不同的datetime字符串，尤其是在不同的地区。
幸运的是，Ionic的dabetway东盟体育apptetime输入可以避免常见的缺陷，允许开发人员在输入中轻松格式化datetime值，并为用户提供一个简单的datetime选择器，从而获得良好的用户体验。
ISO 8601日期时间格式:YYYY-MM-DDTHH:mmZ<！--t.146.598.5.2-->
betway东盟体育app离子使用<一个href="https://www.w3.org/TR/NOTE-datetime" c-id="146.602.5.1">
ISO 8601日期时间格式<！--t.146.604.5.2-->为它的价值。该值只是一个字符串，而不是使用JavaScript的
日期
对象。使用ISO datetime格式可以很容易地在JSON对象和数据库中序列化和解析。
ISO格式可以用作简单的年，或者只是小时和分钟，或者更详细到毫秒和时区。可以使用以下任何一种ISO格式，在用户选择新值后，Ionic将继续使用datetime值最初给定的相同ISO格式。betway东盟体育app
| 描述 | 格式 | Datetime值的例子 |
|---|---|---|
| 一年 | YYYY | 1994 |
| 年和月 | YYYY-MM | 1994 - 12 |
| 完成日期 | YYYY-MM-DD | 1994-12-15 |
| 日期和时间 | YYYY-MM-DDTHH:毫米 | 1994 - 12 - 15 - t13:47 |
| UTC时区 | YYYY-MM-DDTHH: mm: ssTZD | 1994 - 12 - 15 - t13:47:20.789z |
| 时区偏移 | YYYY-MM-DDTHH: mm: ssTZD | 1994 - 12 - 15 - t13:47:20.789 +凌晨 |
| 小时和分钟 | HH: mm | 13:47 |
| 小时,分钟,秒 | HH: mm: ss | 13:47:20 |
请注意，年份总是四位数字，毫秒(如果加上毫秒)总是三位数字，其他的都是两位数字。因此，表示一月的数字总是有一个前导零，例如
01
．另外，每小时都是24小时制，所以
00
是
12点
在12小时的时间里，
13
意味着
下午1点
,
23
意味着
11点
．
还要注意，两者都不是
displayFormat
也没有
pickerFormat
可以设置datetime值的输出，这是由组件设置的值
ngModel
．这些格式仅仅用于将值显示为文本和选择器的接口，但是datetime的值总是作为有效的ISO 8601 datetime字符串持久化。
最小和最大日期时间<！--t.146.767.5.2-->
日期在任意方向上都是无限的，所以对于用户的选择，至少应该有某种形式的日期限制。缺省情况下，最大日期为到当年年底，最小日期为100年前的年初。
要自定义最小和最大日期时间值，请使用
最小值
而且
马克斯
组件属性可以提供对应用程序的用例更有意义的属性，而不是过去100年的默认属性。遵循上表中列出的相同的IS0 8601格式，每个组件可以限制用户可以选择哪些日期。通过
2016
到
最小值
财产和
2020-10-31
到
马克斯
该日期时间将限制在2016年初至2020年10月31日之间的日期选择。
月份名称和星期名称<！--t.146.797.5.2-->
此时，没有一个通用的标准来根据语言或地区自动为月份名称或星期名称选择正确的语言/拼写。
好消息是，有一个<一个href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat" c-id="146.804.5.1"> Intl。日期timeFormat<！--t.146.806.5.2-->标准,<一个href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat" c-id="146.807.5.3"> 大多数浏览器<！--t.146.809.5.4-->采用了。
然而，目前该标准还没有被所有流行的浏览器完全实现，因此Ionic还不能充分利用它。betway东盟体育app
此外，Angular还提供了一个国际化服务，但它仍在大量开发中，因此Ionic目前还不依赖于它。betway东盟体育app
当前的最佳实践是，如果应用程序需要使用月和日的默认英文版本名称以外的名称，则提供一个名称数组。月名和日名可以在应用程序级别配置，也可以单独配置
ion-datetime
的水平。
高级日期时间验证和操作<！--t.146.827.5.2-->
datetime选择器提供了选择精确格式的简单性，并使用标准化将datetime值保存为字符串<一个href="https://www.w3.org/TR/NOTE-datetime" c-id="146.831.5.1">
ISO 8601日期时间格式<！--t.146.833.5.2-->．然而，注意这一点很重要
ion-datetime
不试图解决验证和操作日期时间值时的所有情况。如果需要从特定格式解析datetime值，或者需要操作(例如在日期上增加5天，减去30分钟，等等)，甚至需要将数据格式化为特定的语言环境，那么我们强烈建议使用<一个href="https://date-fns.org/" c-id="146.837.5.5">
date-fns<！--t.146.839.5.6-->在JavaScript中处理日期。
使用
<
ion-item
>
<
ion-label
>
嗯<年代pan class="token tag" c-id="146.867.9.4">
ion-label
>
<
ion-datetime
displayFormat
＝
＂
嗯<年代pan class="token punctuation" c-id="146.889.11.3">
＂
价值
＝
＂
2012 - 12 - 15 - t13:47:20.789<年代pan class="token punctuation" c-id="146.900.11.3">
＂
>
ion-datetime
>
ion-item
>
<
ion-item
>
<
ion-label
>
MM DD YY<年代pan class="token tag" c-id="146.936.9.15">
ion-label
>
<
ion-datetime
displayFormat
＝
＂
MM DD YY<年代pan class="token punctuation" c-id="146.958.11.3">
＂
占位符
＝
＂
选择日期<年代pan class="token punctuation" c-id="146.969.11.3">
＂
>
ion-datetime
>
ion-item
>
<
ion-item
>
<
ion-label
>
禁用<年代pan class="token tag" c-id="146.1005.9.26">
ion-label
>
<
ion-datetime
id
＝
＂
dynamicDisabled<年代pan class="token punctuation" c-id="146.1027.11.3">
＂
displayFormat
＝
＂
MM DD YY<年代pan class="token punctuation" c-id="146.1038.11.3">
＂
禁用
价值
＝
＂
1994-12-15<年代pan class="token punctuation" c-id="146.1052.11.3">
＂
>
ion-datetime
>
ion-item
>
<
ion-item
>
<
ion-label
>
YYYY<年代pan class="token tag" c-id="146.1088.9.37">
ion-label
>
<
ion-datetime
(pickerOptions)
＝
＂
customPickerOptions<年代pan class="token punctuation" c-id="146.1110.11.3">
＂
占位符
＝
＂
自定义选项<年代pan class="token punctuation" c-id="146.1121.11.3">
＂
displayFormat
＝
＂
YYYY<年代pan class="token punctuation" c-id="146.1132.11.3">
＂
最小值
＝
＂
1981<年代pan class="token punctuation" c-id="146.1143.11.3">
＂
马克斯
＝
＂
2002<年代pan class="token punctuation" c-id="146.1154.11.3">
＂
>
ion-datetime
>
ion-item
>
<
ion-item
>
<
ion-label
位置
＝
＂
堆放<年代pan class="token punctuation" c-id="146.1196.11.3">
＂
>
嗯YY<年代pan class="token tag" c-id="146.1201.9.48">
ion-label
>
<
ion-datetime
displayFormat
＝
＂
嗯YY<年代pan class="token punctuation" c-id="146.1223.11.3">
＂
最小值
＝
＂
1989-06-04<年代pan class="token punctuation" c-id="146.1234.11.3">
＂
马克斯
＝
＂
2004-08-23<年代pan class="token punctuation" c-id="146.1245.11.3">
＂
价值
＝
＂
1994 - 12 - 15 - t13:47:20.789<年代pan class="token punctuation" c-id="146.1256.11.3">
＂
>
ion-datetime
>
ion-item
>
<
ion-item
>
<
ion-label
位置
＝
＂
浮动<年代pan class="token punctuation" c-id="146.1298.11.3">
＂
>
MM / DD / YYYY<年代pan class="token tag" c-id="146.1303.9.59">
ion-label
>
<
ion-datetime
displayFormat
＝
＂
MM / DD / YYYY<年代pan class="token punctuation" c-id="146.1325.11.3">
＂
最小值
＝
＂
1994-03-14<年代pan class="token punctuation" c-id="146.1336.11.3">
＂
马克斯
＝
＂
2012-12-09<年代pan class="token punctuation" c-id="146.1347.11.3">
＂
价值
＝
＂
2002 - 09 - 23 - t15:03:46.789<年代pan class="token punctuation" c-id="146.1358.11.3">
＂
>
ion-datetime
>
ion-item
>
<
ion-item
>
<
ion-label
位置
＝
＂
浮动<年代pan class="token punctuation" c-id="146.1400.11.3">
＂
>
MM / DD / YYYY<年代pan class="token tag" c-id="146.1405.9.70">
ion-label
>
<
ion-datetime
displayFormat
＝
＂
MM / DD / YYYY<年代pan class="token punctuation" c-id="146.1427.11.3">
＂
最小值
＝
＂
1994-03-14<年代pan class="token punctuation" c-id="146.1438.11.3">
＂
马克斯
＝
＂
2012-12-09<年代pan class="token punctuation" c-id="146.1449.11.3">
＂
>
ion-datetime
>
ion-item
>
<
ion-item
>
<
ion-label
>
DDD。MMM DD, YY(本地设置)<年代pan class="token tag" c-id="146.1485.9.81">
ion-label
>
<
ion-datetime
价值
＝
＂
1995-04-15<年代pan class="token punctuation" c-id="146.1507.11.3">
＂
最小值
＝
＂
1990 - 02年<年代pan class="token punctuation" c-id="146.1518.11.3">
＂
马克斯
＝
＂
2000<年代pan class="token punctuation" c-id="146.1529.11.3">
＂
(dayShortNames)
＝
＂
customDayShortNames<年代pan class="token punctuation" c-id="146.1540.11.3">
＂
displayFormat
＝
＂
DDD。嗯,YY<年代pan class="token punctuation" c-id="146.1551.11.3">
＂
monthShortNames
＝
＂
Jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des<年代pan class="token punctuation" c-id="146.1562.11.3">
＂
>
ion-datetime
>
ion-item
>
<
ion-item
>
<
ion-label