ion-datetime
日期时间呈现一个日历界面和时间轮，使用户能够轻松选择日期和时间。日期时间类似于 datetime-local 的原生 input 元素，但是，Ionic Framework 的日期时间组件使其能够轻松以首选格式显示日期和时间，并管理日期时间值。
概述
从历史上看，在 JavaScript 甚至 HTML 输入中处理日期时间值一直是一个挑战。具体来说，JavaScript 的 Date 对象在正确解析日期时间字符串或格式化日期时间值方面臭名昭著。更糟糕的是，不同的浏览器和 JavaScript 版本对各种日期时间字符串的解析方式不同，尤其是在每个区域设置中。
幸运的是，Ionic Framework 的日期时间输入经过精心设计，因此开发人员可以避免常见的陷阱，从而使开发人员能够轻松地操作日期时间值，并为用户提供简单的日期时间选择器，以获得出色的用户体验。
ISO 8601 日期时间格式：YYYY-MM-DDTHH:mmZ
Ionic Framework 使用 ISO 8601 日期时间格式 作为其值。该值只是一个字符串，而不是使用 JavaScript 的 Date 对象。使用 ISO 日期时间格式可以轻松地在 JSON 对象和数据库中序列化和解析。
以下是可与 ion-datetime 一起使用的一些 ISO 8601 格式示例
| 描述 | 格式 | 日期时间值示例 |
|---|---|---|
| 年 | YYYY | 1994 |
| 年和月 | YYYY-MM | 1994-12 |
| 完整日期 | YYYY-MM-DD | 1994-12-15 |
| 日期和时间 | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 |
| UTC 时区 | YYYY-MM-DDTHH:mm:ssZ | 1994-12-15T13:47:20Z |
| 时区偏移 | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20+05:00 |
| 小时和分钟 | HH:mm | 13:47 |
请注意，年份始终为四位数字，毫秒（如果添加）始终为三位数字，所有其他数字始终为两位数字。因此，表示 1 月的数字始终带有前导零，例如 01。此外，小时始终采用 24 小时制，因此 00 是 12 小时制中的 12am，13 表示 1pm，23 表示 11pm。
虽然可以使用 ISO 8601 日期时间格式指定秒、毫秒和时区，但 ion-datetime 不会提供秒、毫秒和时区选择的界面。提供的任何秒、毫秒或时区值都将被忽略。
基本用法
与日期时间按钮一起使用
如果需要在模态或弹出窗口等覆盖层中呈现日期时间，建议使用 ion-datetime-button。ion-datetime-button 应在空间受限时使用。此组件显示按钮，这些按钮显示当前日期和时间值。点击按钮时，日期或时间选择器将在覆盖层中打开。
异步设置值
如果日期时间创建后，其 value 以编程方式更新，则日期时间将自动跳转到新日期。但是，建议在用户能够与日期时间交互时避免以这种方式更新 value，因为这可能会让当前试图选择日期的用户感到困惑。例如，如果日期时间的 value 由异步进程加载，建议使用 CSS 隐藏日期时间，直到值完成更新。
日期约束
最大日期和最小日期
要自定义最小和最大日期时间值，可以提供 min 和 max 组件属性，这可能更适合应用程序的用例。按照上面表格中列出的相同 IS0 8601 格式，每个组件都可以限制用户可以选择哪些日期。
以下示例将日期选择限制为仅 2022 年 3 月至 2022 年 5 月。
选择特定值
虽然 min 和 max 属性允许将日期选择限制在某个范围内，但 monthValues、dayValues、yearValues、hourValues 和 minuteValues 属性允许选择用户可以选择特定日期和时间。
以下示例允许以 15 分钟的增量选择分钟。它还允许以 5 天的增量选择日期。
高级日期约束
使用 isDateEnabled 属性，开发人员可以自定义 ion-datetime 以禁用特定日期、日期范围、周末或任何使用 ISO 8601 日期字符串的自定义规则。isDateEnabled 属性接受一个返回布尔值的函数，指示日期是否启用。该函数将针对每个渲染的日历日期调用，包括前一个月、当前月和下一个月。自定义实现应针对性能进行优化，以避免卡顿。
以下示例展示了如何禁用所有周末日期。对于更高级的日期操作，建议使用日期实用程序，例如 date-fns。
本地化
Ionic Framework 使用 Intl.DatetimeFormat Web API，它使我们能够根据用户设备上设置的语言和区域自动本地化月份和日期名称。
自定义区域设置
在您需要特定区域设置的情况下，可以使用 locale 属性来设置它。区域设置控制显示的语言以及日期和时间格式。
以下示例展示了如何将区域设置设置为西班牙语（西班牙）。
时间标签不会自动本地化。有关更多信息，请参见 时间标签。
小时周期
ion-datetime 默认情况下将使用由 locale 属性指定的小时周期。例如，如果 locale 设置为 en-US，则 ion-datetime 将使用 12 小时制。
有 4 种主要的小时周期类型
| 小时周期类型 | 描述 |
|---|---|
'h12' | 使用 1–12 的小时系统；对应于模式中的 'h'。12 小时制时钟，午夜从 12:00 am 开始。 |
'h23' | 使用 0–23 的小时系统；对应于模式中的 'H'。24 小时制时钟，午夜从 0:00 开始。 |
'h11' | 使用 0–11 的小时系统；对应于模式中的 'K'。12 小时制时钟，午夜从 0:00 am 开始。 |
'h24' | 使用 1–24 的小时系统；对应于模式中的 'k'。24 小时制时钟，午夜从 24:00 开始。 |
在某些情况下，您可能需要对使用哪种小时周期有更多控制。这就是 hourCycle 属性可以提供帮助的地方。
在以下示例中，我们可以使用 hourCycle 属性强制 ion-datetime 使用 12 小时周期，即使区域设置是 en-GB，默认情况下它使用 24 小时周期。
一周的第一天
对于 ion-datetime，默认情况下，一周的第一天是星期日。截至 2022 年，还没有浏览器 API 允许 Ionic 根据设备的区域设置自动确定一周的第一天，尽管正在进行相关工作（参见：TC39 GitHub）。
时间标签
时间标签不会自动本地化。幸运的是，Ionic 使用 time-label 插槽简化了提供自定义本地化的过程。
区域设置扩展标签
ion-datetime 也支持 区域设置扩展标签 作为 Intl.Locale API 的一部分。这些标签允许您在区域设置字符串本身中对有关区域设置的信息进行编码。如果开发者在他们的应用程序中使用 Intl.Locale API，他们可能更喜欢使用扩展标签方法。
例如，如果您想对 en-GB 区域设置使用 12 小时周期，您可以提供扩展标签，而不是同时使用 locale 和 hourCycle 属性。
在将 Intl.Locale 用于您的应用程序之前，请务必查看 浏览器兼容性图表。
展示
默认情况下，ion-datetime 允许用户选择日期和时间。此外，用户还可以选择特定的月份、年份、小时和分钟。
某些用例可能只要求选择日期或只要求选择时间。presentation 属性允许您指定要显示的选取器以及显示它们的顺序。例如，设置 date-time 将使日历选取器出现在时间选取器之前。设置 time-date 将使日历选取器出现在时间选取器之后。
月份和年份选择
可以通过将 month-year、year-month、month 或 year 传递给 presentation 属性来进行月份和年份选择。
此示例展示了使用 month-year 配置的日期时间。
时间选择
可以通过将 date-time、time-date 或 time 传递给 presentation 属性来进行时间选择。
此示例展示了使用 time 配置的日期时间。
日期选择
可以通过将 date-time、time-date 或 date 传递给 presentation 属性来进行日期选择。
此示例展示了使用 date 配置的日期时间。
滚轮样式选取器
默认情况下，Ionic 会在使用 presentation 时优先显示网格样式布局。但是，可以使用 preferWheel 属性显示滚轮样式。当 preferWheel 为 true 时，Ionic 将尽可能优先显示滚轮样式布局。
某些 presentation 选项具有网格样式和滚轮样式，开发者可以使用 preferWheel 属性在这两种样式之间进行选择。其他 presentation 值只有滚轮样式，永远不会显示网格样式。下表显示了哪些 presentation 值具有网格样式或滚轮样式。
presentation | 有网格样式？ | 有滚轮样式？ |
|---|---|---|
date | 是 | 是 |
date-time | 是 | 是 |
month | 否 | 是 |
month-year | 否 | 是 |
time | 否 | 是 |
time-date | 是 | 是 |
year | 否 | 是 |
以下示例展示了使用 presentation="date-time" 的滚轮选取器。
多日期选择
如果将 multiple 属性设置为 true，则可以从日历选取器中选择多个日期。点击已选日期将取消选择该日期。
此属性仅在使用 presentation="date" 和 preferWheel="false" 时支持。
标题
默认情况下，ion-datetime 不会显示与组件相关的任何标题或标题。开发者可以使用 showDefaultTitle 属性来显示默认的标题/标题配置。他们还可以使用 title 插槽来自定义在标题中呈现的内容。
显示默认标题
自定义标题
格式选项
您可以通过提供 formatOptions 来自定义标题文本中的日期和时间按钮中的时间的格式。formatOptions 属性中的 date 和 time 应该分别是 Intl.DateTimeFormatOptions 对象。如果未提供 formatOptions，则将使用日期和时间的默认格式。
日期时间 不操作或设置 时区。如果提供 timeZone 或 timeZoneName，它们将被忽略，并且时区将设置为 UTC。这样可以确保显示的值与选定的值匹配，而不是转换为用户的当前时区。
请谨慎使用您提供的选项，因为它们可能与选定的展示不匹配。例如，为 month 的展示提供 minute: 'numeric' 可能会导致意外行为，显示一个月，而实际上可能只期望一个时间。
按钮
默认情况下，ionChange 会在每次选择新日期时使用新的日期时间值发出。要要求用户在发出 ionChange 之前确认，您可以将 showDefaultButtons 属性设置为 true，也可以使用 buttons 插槽传入一个自定义确认按钮。当传入自定义按钮时，确认按钮必须调用 ion-datetime 上的 confirm 方法才能发出 ionChange。
显示确认按钮
默认的“完成”和“取消”按钮已经预先配置为分别调用 confirm 和 cancel 方法。
自定义按钮文本
对于简单用例，开发者可以通过 doneText 和 cancelText 属性向确认值和取消值提供自定义按钮文本。我们建议在您只需要更改按钮文本并且不需要任何自定义行为时这样做。
自定义按钮元素
开发者可以提供他们自己的按钮来实现高级自定义行为。
ion-datetime 具有 confirm、cancel 和 reset 方法，开发者可以在点击自定义按钮时调用这些方法。reset 方法还允许开发者提供一个日期来重置日期时间。
突出显示特定日期
使用 highlightedDates 属性，开发者可以使用自定义文本或背景颜色来设置特定日期的样式。此属性可以定义为日期及其颜色的数组，也可以定义为接收 ISO 字符串并返回要使用的颜色的回调函数。
在指定颜色时，可以使用任何有效的 CSS 颜色格式。这包括十六进制代码、rgba、颜色变量 等。
为了保持一致的用户体验，选定日期的样式将始终覆盖自定义突出显示。
此属性仅在 preferWheel="false" 且使用 presentation 为 "date"、"date-time" 或 "time-date" 时支持。
使用数组
当突出显示适用于固定日期（例如截止日期）时，数组更适合。
使用回调函数
当突出显示的日期是重复出现的（例如生日或定期会议）时，回调函数更适合。
样式
全局主题
Ionic 功能强大的主题系统可用于轻松地更改整个应用程序以匹配某个主题。在此示例中，我们使用 颜色创建器 和 分级颜色生成器 创建了一个玫瑰色调色板，我们可以将其用于 ion-datetime。
此方法的优势在于，所有组件（不仅仅是 ion-datetime）都可以自动利用此主题。
日历日期
可以使用 CSS 阴影部分对网格样式 ion-datetime 中的日历日期进行样式设置。
以下示例选择了两天前的日期，除非该日期在上个月，否则它将选择未来两天中的日期。这样做是为了演示目的，以便展示如何对所有日期、当前日期和选定日期应用自定义样式。
滚轮选取器
ion-datetime 中使用的滚轮可以通过阴影部分和 CSS 变量的组合来设置样式。这适用于滚轮样式日期时间中的列和网格样式日期时间中的月份/年份选取器。
时区
Ionic 的 ion-datetime 遵循 datetime-local 的行为，即在日期时间控件内部不操作或设置时区。换句话说，时间值“07:00”不会根据不同的时区进行调整。
我们建议使用 date-fns-tz 等库将日期时间值转换为所需时区。
以下是如何将 ISO-8601 字符串格式化为在用户设备上设置的时区中显示的示例
import { format, utcToZonedTime } from 'date-fns-tz';
// Get the time zone set on the user's device
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
// Create a date object from a UTC date string
const date = new Date('2014-10-25T10:46:20Z');
// Use date-fns-tz to convert from UTC to a zoned time
const zonedTime = utcToZonedTime(date, userTimeZone);
// Create a formatted string from the zoned time
format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
解析日期值
ionChange 事件将以 ISO-8601 字符串形式在事件负载中发出日期值。开发者有责任根据他们的应用程序需求对其进行格式化。我们建议使用 date-fns 来格式化日期值。
以下是如何将 ISO-8601 字符串格式化为显示月份、日期和年份的示例。
import { format, parseISO } from 'date-fns';
/**
* This is provided in the event
* payload from the `ionChange` event.
*
* The value is an ISO-8601 date string.
*/
const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');
console.log(formattedString); // Jun 4, 2021
请查看 https://date-fns.org/docs/format 以获取所有有效格式标记的列表。
高级日期时间验证和操作
日期时间选择器提供了选择精确格式的简便性，并使用标准化的 ISO 8601 日期时间格式 将日期时间值持久化为字符串。但是，需要注意的是，ion-datetime 不会尝试解决验证和操作日期时间值时出现的所有情况。如果需要从特定格式解析日期时间值，或对其进行操作（例如将日期加 5 天，减去 30 分钟等），甚至将数据格式化为特定区域设置，那么我们强烈建议使用 date-fns 来处理 JavaScript 中的日期。
可访问性
键盘交互
ion-datetime 具有完整的键盘支持，可以导航到组件内部的可聚焦元素之间。下表详细说明了每个键的功能。
| 键 | 描述 |
|---|---|
| Tab | 将焦点移动到下一个可聚焦元素。 |
| Shift + Tab | 将焦点移动到上一个可聚焦元素。 |
| Space 或 Enter | 单击可聚焦元素。 |
日期网格
| 键 | 描述 |
|---|---|
| ArrowUp | 将焦点移动到上周的同一天。 |
| ArrowDown | 将焦点移动到下周的同一天。 |
| ArrowRight | 将焦点移动到下一天。 |
| ArrowLeft | 将焦点移动到前一天。 |
| Home | 将焦点移动到本周的第一天。 |
| End | 将焦点移动到本周的最后一天。 |
| PageUp | 将日期网格更改为上个月。 |
| PageDown | 将日期网格更改为下个月。 |
| Shift + PageUp | 将日期网格更改为上一年。 |
| Shift + PageDown | 将日期网格更改为下一年。 |
时间、月份和年份滚轮
日期时间中的滚轮选择器在内部使用 Picker。有关滚轮选择器的可访问性功能的更多信息，请参阅 Picker 可访问性。
接口
DatetimeChangeEventDetail
interface DatetimeChangeEventDetail {
value?: string | null;
}
DatetimeCustomEvent
虽然不是必需的，但此接口可以用于代替 CustomEvent 接口，以便对从该组件发出的 Ionic 事件进行更强的类型化。
interface DatetimeCustomEvent extends CustomEvent {
detail: DatetimeChangeEventDetail;
target: HTMLIonDatetimeElement;
}
属性
cancelText
| 描述 | 要在选择器的取消按钮上显示的文本。 |
| 属性 | cancel-text |
| 类型 | string |
| 默认值 | 'Cancel' |
clearText
| 描述 | 要在选择器的“清除”按钮上显示的文本。 |
| 属性 | clear-text |
| 类型 | string |
| 默认值 | 'Clear' |
color
| 描述 | 要从应用程序的调色板中使用的颜色。默认选项为："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。有关颜色的更多信息，请参阅 主题。 |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认值 | 'primary' |
dayValues
| 描述 | 用于创建可选择日期列表的值。默认情况下，对于给定的月份，会显示每一天。但是，要控制要显示的月份的哪些日期，dayValues 输入可以接受数字、数字数组或逗号分隔的数字字符串。请注意，即使数组日期对于所选月份具有无效的数字，例如 2 月的 31，它也会正确地不显示对于所选月份无效的日期。 |
| 属性 | day-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
disabled
| 描述 | 如果为 true，则用户无法与日期时间交互。 |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
doneText
| 描述 | 要在选择器的“完成”按钮上显示的文本。 |
| 属性 | done-text |
| 类型 | string |
| 默认值 | 'Done' |
firstDayOfWeek
| 描述 | 要用于 ion-datetime 的一周的第一天。默认值为 0，表示星期日。 |
| 属性 | first-day-of-week |
| 类型 | number |
| 默认值 | 0 |
formatOptions
| 描述 | 日期和时间的格式化选项。应包括一个“date”和/或“time”对象，每个对象都是 Intl.DateTimeFormatOptions 类型。 |
| 属性 | undefined |
| 类型 | undefined ｜ { date: DateTimeFormatOptions; time?: DateTimeFormatOptions ｜ undefined; } ｜ { date?: DateTimeFormatOptions ｜ undefined; time: DateTimeFormatOptions; } |
| 默认值 | undefined |
highlightedDates
| 描述 | 用于将自定义文本和背景颜色应用于特定日期。 可以是包含 ISO 字符串和颜色的对象的数组，也可以是接收 ISO 字符串并返回颜色的回调。 仅适用于 date、date-time 和 time-date 呈现，且 preferWheel="false"。 |
| 属性 | undefined |
| 类型 | ((dateIsoString: string) => DatetimeHighlightStyle ｜ undefined) ｜ DatetimeHighlight[] ｜ undefined |
| 默认值 | undefined |
hourCycle
| 描述 | ion-datetime 的小时周期。如果未设置任何值，则由当前区域设置指定。 |
| 属性 | hour-cycle |
| 类型 | "h11" ｜ "h12" ｜ "h23" ｜ "h24" ｜ undefined |
| 默认值 | undefined |
hourValues
| 描述 | 用于创建可选择小时列表的值。默认情况下，小时值范围从 24 小时的 0 到 23，或 12 小时的 1 到 12。但是，要控制要显示的哪些小时，hourValues 输入可以接受数字、数字数组或逗号分隔的数字字符串。 |
| 属性 | hour-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
isDateEnabled
| 描述 | 返回单个日期（日历日）是否启用或禁用。 如果为 true，则该天将启用/可交互。如果为 false，则该天将禁用/不可交互。该函数接受给定日期的 ISO 8601 日期字符串。默认情况下，所有日期都已启用。开发者可以使用此函数来编写自定义逻辑以禁用某些日期。 该函数会为每个渲染的日历日期调用，包括前一个、当前和下一个月。自定义实现应针对性能进行优化，以避免卡顿。 |
| 属性 | undefined |
| 类型 | ((dateIsoString: string) => boolean) ｜ undefined |
| 默认值 | undefined |
locale
| 描述 | 要用于 ion-datetime 的区域设置。这会影响月份和日期名称的格式。"default" 值指的是设备设置的默认区域设置。 |
| 属性 | locale |
| 类型 | string |
| 默认值 | 'default' |
max
| 描述 | 允许的最大日期时间。值必须是遵循 ISO 8601 日期时间格式标准 的日期字符串，例如 1996-12-19。格式不必特定于确切的日期时间。例如，最大值可以是年份，例如 1994。默认值为今年的年底。 |
| 属性 | max |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
min
| 描述 | 允许的最小日期时间。值必须是遵循 ISO 8601 日期时间格式标准 的日期字符串，例如 1996-12-19。格式不必特定于确切的日期时间。例如，最小值可以是年份，例如 1994。默认值为 100 年前今天的年初。 |
| 属性 | min |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
minuteValues
| 描述 | 用于创建可选择分钟列表的值。默认情况下，分钟范围从 0 到 59。但是，要控制要显示的哪些分钟，minuteValues 输入可以接受数字、数字数组或逗号分隔的数字字符串。例如，如果分钟选择应该只间隔 15 分钟，则此输入值将为 minuteValues="0,15,30,45"。 |
| 属性 | minute-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
mode
| 描述 | 模式决定要使用的平台样式。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
monthValues
| 描述 | 用于创建可选择月份列表的值。默认情况下，月份值范围从 1 到 12。但是，要控制要显示的哪些月份，monthValues 输入可以接受数字、数字数组或逗号分隔的数字字符串。例如，如果只应显示夏季月份，则此输入值将为 monthValues="6,7,8"。请注意，月份数字 *没有* 零索引，这意味着 1 月的值为 1，而 12 月的值为 12。 |
| 属性 | month-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
multiple
| 描述 | 如果为 true，则可以一次选择多个日期。仅适用于 presentation="date" 和 preferWheel="false"。 |
| 属性 | multiple |
| 类型 | boolean |
| 默认值 | false |
name
| 描述 | 控件的名称，它与表单数据一起提交。 |
| 属性 | name |
| 类型 | string |
| 默认值 | this.inputId |
preferWheel
| 描述 | 如果 true，将在可能的情况下渲染轮盘选择器而不是日历网格。如果 false，将在可能的情况下渲染日历网格而不是轮盘选择器。当 presentation 为以下值之一时，可以渲染轮盘选择器而不是网格："date"、"date-time" 或 "time-date"。当 presentation 为以下值之一时，无论 preferWheel 值如何，始终会渲染轮盘选择器："time"、"month"、"month-year" 或 "year"。 |
| 属性 | prefer-wheel |
| 类型 | boolean |
| 默认值 | false |
presentation
| 描述 | 要选择的具体值。"date" 将显示一个日历选择器，用于选择月份、日期和年份。"time" 将显示一个时间选择器，用于选择小时、分钟以及（可选的）上午/下午。"date-time" 将先显示日期选择器，然后显示时间选择器。"time-date" 将先显示时间选择器，然后显示日期选择器。 |
| 属性 | presentation |
| 类型 | "date" ｜ "date-time" ｜ "month" ｜ "month-year" ｜ "time" ｜ "time-date" ｜ "year" |
| 默认值 | 'date-time' |
readonly
| 描述 | 如果 true，则日期时间显示正常，但无法更改所选日期。 |
| 属性 | readonly |
| 类型 | boolean |
| 默认值 | false |
showClearButton
| 描述 | 如果 true，将在 ion-datetime 组件底部的默认“取消”和“确定”按钮旁边渲染一个“清除”按钮。开发者也可以使用 button 插槽来定制这些按钮。如果在 button 插槽中设置了自定义按钮，则不会渲染默认按钮。 |
| 属性 | show-clear-button |
| 类型 | boolean |
| 默认值 | false |
showDefaultButtons
| 描述 | 如果 true，则默认“取消”和“确定”按钮将渲染在 ion-datetime 组件的底部。开发者也可以使用 button 插槽来定制这些按钮。如果在 button 插槽中设置了自定义按钮，则不会渲染默认按钮。 |
| 属性 | show-default-buttons |
| 类型 | boolean |
| 默认值 | false |
showDefaultTimeLabel
| 描述 | 如果 true，则默认“时间”标签将渲染在 ion-datetime 组件的时间选择器中。开发者也可以使用 time-label 插槽来定制此标签。如果在 time-label 插槽中设置了自定义标签，则不会渲染默认标签。 |
| 属性 | show-default-time-label |
| 类型 | boolean |
| 默认值 | true |
showDefaultTitle
| 描述 | 如果 true，则将在日历选择器上方显示一个标题。这将包括插槽标题和所选日期。 |
| 属性 | show-default-title |
| 类型 | boolean |
| 默认值 | false |
size
| 描述 | 如果 cover，则 ion-datetime 将扩展以覆盖其容器的全部宽度。如果 fixed，则 ion-datetime 将具有固定宽度。 |
| 属性 | size |
| 类型 | "cover" ｜ "fixed" |
| 默认值 | 'fixed' |
titleSelectedDatesFormatter
| 描述 | 用于格式化显示所选日期数量的标题文本的回调函数。仅在所选日期数量为 0 或超过 1 时使用（即对于恰好 1 个日期，则不使用）。默认情况下，标题文本设置为“numberOfDates 天”。 如果您需要从回调函数中访问 this，请参阅 https://ionicframework.cn/docs/troubleshooting/runtime#accessing-this。 |
| 属性 | undefined |
| 类型 | ((selectedDates: string[]) => string) ｜ undefined |
| 默认值 | undefined |
value
| 描述 | 日期时间的值，以有效的 ISO 8601 日期时间字符串表示。当 multiple="true" 时，这应该是一个字符串数组。 |
| 属性 | value |
| 类型 | null ｜ string ｜ string[] ｜ undefined |
| 默认值 | undefined |
yearValues
| 描述 | 用于创建可选择年份列表的值。默认情况下，年份值介于 min 和 max 日期时间输入之间。但是，为了控制要显示的具体年份，yearValues 输入可以接受一个数字、一个数字数组或一个用逗号分隔的数字字符串。例如，要显示即将到来的和最近的闰年，则此输入的值将为 yearValues="2008,2012,2016,2020,2024"。 |
| 属性 | year-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
事件
| 名称 | 描述 | 冒泡 |
|---|---|---|
ionBlur | 当日期时间失去焦点时发出。 | true |
ionCancel | 当日期时间选择被取消时发出。 | true |
ionChange | 当值（所选日期）发生变化时发出。 当以编程方式设置 value 属性时，此事件不会发出。 | true |
ionFocus | 当日期时间获得焦点时发出。 | true |
方法
cancel
| 描述 | 发出 ionCancel 事件，并可选地关闭日期时间呈现到的弹出框或模态框。 |
| 签名 | cancel(closeOverlay?: boolean) => Promise<void> |
confirm
| 描述 | 确认所选日期时间值，更新 value 属性，并可选地关闭日期时间呈现到的弹出框或模态框。 |
| 签名 | confirm(closeOverlay?: boolean) => Promise<void> |
reset
| 描述 | 重置日期时间的内部状态，但不更新值。传递有效的 ISO-8601 字符串将重置组件的状态到提供的日期。如果没有提供值，则内部状态将重置到 min、max 和 today 的钳位值。 |
| 签名 | reset(startDate?: string) => Promise<void> |
CSS 阴影部分
| 名称 | 描述 |
|---|---|
calendar-day | 显示日期时间日历中一天的单个按钮。 |
calendar-day active | 当前选定的日历日期。 |
calendar-day disabled | 禁用的日历日期。 |
calendar-day today | 包含当前日期的日历日期。 |
month-year-button | 当使用网格样式布局时，打开月/年选择器的按钮。 |
time-button | 当使用网格样式布局且 presentation="date-time" 或 "time-date" 时，打开时间选择器的按钮。 |
time-button active | 当选择器打开时的时间选择器按钮。 |
wheel-item | 当使用轮盘样式布局时，或在使用网格样式布局的月/年选择器中的单个项目。 |
wheel-item active | 当前选定的 wheel-item。 |
CSS 自定义属性
- iOS
- MD
| 名称 | 描述 |
|---|---|
--background | 日期时间组件的主要背景。 |
--background-rgb | 日期时间组件的主要背景，以 RGB 格式表示。 |
--title-color | 标题的文本颜色。 |
--wheel-fade-background-rgb | 当使用轮盘样式布局时，或在网格样式布局的月/年选择器中，覆盖未选定项目的渐变的颜色。必须以 RGB 格式表示，例如 255, 255, 255。 |
--wheel-highlight-background | 当使用轮盘样式布局时，或在网格样式布局的月/年选择器中，选定项目下方突出显示的背景。 |
--wheel-highlight-border-radius | 当使用轮盘样式布局时，或在网格样式布局的月/年选择器中，选定项目下方突出显示的边框半径。 |
| 名称 | 描述 |
|---|---|
--background | 日期时间组件的主要背景。 |
--background-rgb | 日期时间组件的主要背景，以 RGB 格式表示。 |
--title-color | 标题的文本颜色。 |
--wheel-fade-background-rgb | 当使用轮盘样式布局时，或在网格样式布局的月/年选择器中，覆盖未选定项目的渐变的颜色。必须以 RGB 格式表示，例如 255, 255, 255。 |
--wheel-highlight-background | 当使用轮盘样式布局时，或在网格样式布局的月/年选择器中，选定项目下方突出显示的背景。 |
--wheel-highlight-border-radius | 当使用轮盘样式布局时，或在网格样式布局的月/年选择器中，选定项目下方突出显示的边框半径。 |
插槽
| 名称 | 描述 |
|---|---|
buttons | 日期时间中的按钮。 |
time-label | 日期时间中时间选择器的标签。 |
title | 日期时间的标题。 |