ion-datetime
日期时间组件提供日历界面和时间滚轮，使用户可以轻松选择日期和时间。日期时间组件类似于原生的 datetime-local 类型的 input 元素，但是 Ionic 框架的 Datetime 组件使显示首选格式的日期和时间以及管理日期时间值变得容易。
概述
历史上，在 JavaScript 中甚至 HTML 输入中处理日期时间值一直是一个挑战。具体来说，JavaScript 的 Date 对象以难以正确解析日期时间字符串或格式化日期时间值而闻名。更糟糕的是，不同的浏览器和 JavaScript 版本以不同的方式解析各种日期时间字符串，尤其是在不同地区。
幸运的是，Ionic 框架的日期时间输入被设计为让开发者避免常见的陷阱，使开发者能够轻松操作日期时间值，并为用户提供简单的日期时间选择器，以获得良好的用户体验。
ISO 8601 日期时间格式：YYYY-MM-DDTHH:mmZ
Ionic 框架使用 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 |
请注意，年份始终为四位数，毫秒（如果添加）始终为三位数，其他所有内容始终为两位数。因此表示一月的数字始终带有前导零，例如 01。此外，小时始终采用 24 小时制，因此 00 是 12 小时制中的 12am，13 表示 1pm，23 表示 11pm。
虽然可以使用 ISO 8601 日期时间格式指定秒、毫秒和时区，但 ion-datetime 不提供秒、毫秒和时区选择的界面。任何提供的秒、毫秒或时区值都将被忽略。
基本用法
与 Datetime Button 一起使用
如果需要在覆盖层（如模态框或弹出框）中显示日期时间，我们建议使用 ion-datetime-button。当空间受限时，应使用 ion-datetime-button。此组件显示显示当前日期和时间值的按钮。当按钮被点击时，日期或时间选择器会在覆盖层中打开。
异步设置值
如果在日期时间组件已经创建后通过编程方式更新其 value，日期时间组件将自动跳转到新的日期。但是，建议在用户能够与日期时间组件交互时避免以这种方式更新 value，因为这可能会让当前正在尝试选择日期的用户感到困惑。例如，如果日期时间组件的 value 是通过异步过程加载的，建议使用 CSS 隐藏日期时间组件，直到值完成更新。
日期约束
最大和最小日期
要自定义最小和最大日期时间值，可以提供 min 和 max 组件属性，这对于应用的用例可能更有意义。遵循上面表格中列出的相同 ISO 8601 格式，每个组件可以限制用户可以选择哪些日期。
以下示例将日期选择限制为仅 2022 年 3 月到 2022 年 5 月。
选择特定值
虽然 min 和 max 属性允许你将日期选择限制在一定范围内，但 monthValues、dayValues、yearValues、hourValues 和 minuteValues 属性允许你选择用户可以选择的特定日期和时间。
以下示例允许以 15 分钟为增量选择分钟。还允许以 5 天为增量选择日期。
高级日期约束
使用 isDateEnabled 属性，开发者可以自定义 ion-datetime，使用 ISO 8601 日期字符串禁用特定日期、日期范围、周末或任何自定义规则。isDateEnabled 属性接受一个返回布尔值的函数，指示日期是否启用。该函数为每个渲染的日历天调用，包括前一个月、当前月和下一个月。自定义实现应优化性能以避免卡顿。
以下示例显示如何禁用所有周末日期。对于更高级的日期操作，我们建议使用日期工具库，如 date-fns。
本地化
Ionic 框架利用 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 小时制，即使区域设置为默认使用 24 小时制的 en-GB：
每周第一天
对于 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、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" 且使用 "date"、"date-time" 或 "time-date" 的 presentation 时受支持。
使用数组
当高亮应用于固定日期（如到期日）时，数组更合适。
使用回调
当高亮日期是重复性的（如生日或定期会议）时，回调更合适。
样式
全局主题
Ionic 强大的主题系统可用于轻松更改整个应用以匹配特定主题。在此示例中，我们使用颜色创建器和阶梯颜色生成器创建了玫瑰色调色板，可用于 ion-datetime。
这种方法的好处是，不仅 ion-datetime，每个组件都可以自动利用此主题。
日历头部
日历头部管理日期导航控件（月份/年份选择器和上一个/下一个按钮）以及使用网格样式布局时的星期几。
日历天
网格样式 ion-datetime 中的日历天可以使用 CSS 阴影部分进行样式设置。
下面的示例选择了 2 天前的日期，除非该日期在上个月，则选择一个未来 2 天的日期。这是为了演示目的，展示如何对所有天、当前天和选定天应用自定义样式。
滚轮选择器
ion-datetime 中使用的滚轮可以通过阴影部分和 CSS 变量的组合进行样式设置。这适用于滚轮样式日期时间组件中的列以及网格样式日期时间组件中的月份/年份选择器。
时区
Ionic 的 ion-datetime 遵循 datetime-local 的行为，不会在日期时间控件内部操作或设置时区。换句话说，时间值 "07:00" 不会根据不同的时区进行调整。
我们建议使用像 date-fns-tz 这样的库将日期时间值转换为所需的时区。
以下是将 ISO-8601 字符串格式化为用户设备上设置的时区显示的示例：
import { format, utcToZonedTime } from 'date-fns-tz';
// 获取用户设备上设置的时区
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
// 从 UTC 日期字符串创建日期对象
const date = new Date('2014-10-25T10:46:20Z');
// 使用 date-fns-tz 从 UTC 转换为带时区的时间
const zonedTime = utcToZonedTime(date, userTimeZone);
// 从带时区的时间创建格式化字符串
format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
解析日期值
ionChange 事件将日期值作为 ISO-8601 字符串在事件负载中发出。开发者有责任根据其应用需求对其进行格式化。我们建议使用 date-fns 来格式化日期值。
以下是将 ISO-8601 字符串格式化为显示月份、日期和年份的示例：
import { format, parseISO } from 'date-fns';
/**
* 这是在 `ionChange` 事件的
* 事件负载中提供的。
*
* 该值是 ISO-8601 日期字符串。
*/
const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');
console.log(formattedString); // 2021 年 6 月 4 日
请参阅 https://date-fns.org/docs/format 获取所有有效格式令牌的列表。
高级日期时间验证和操作
日期时间选择器提供了选择精确格式的简便性，并使用标准化的 ISO 8601 日期时间格式将日期时间值持久化为字符串。但是，需要注意的是，ion-datetime 并不试图解决验证和操作日期时间值时的所有情况。如果日期时间值需要从特定格式解析，或进行操作（例如，在日期上加 5 天、减去 30 分钟等），甚至将数据格式化为特定区域，那么我们强烈建议使用 date-fns 在 JavaScript 中处理日期。
无障碍访问
键盘交互
ion-datetime 拥有完整的键盘支持，用于在组件内的可聚焦元素之间导航。下表详细说明了每个键的作用：
| 键 | 描述 |
|---|---|
| Tab | 将焦点移动到下一个可聚焦元素。 |
| Shift + Tab | 将焦点移动到上一个可聚焦元素。 |
| Space 或 Enter | 点击可聚焦元素。 |
日期网格
| 键 | 描述 |
|---|---|
| 上箭头 | 将焦点移动到前一周的同一天。 |
| 下箭头 | 将焦点移动到后一周的同一天。 |
| 右箭头 | 将焦点移动到下一天。 |
| 左箭头 | 将焦点移动到前一天。 |
| Home | 将焦点移动到当前周的第一天。 |
| End | 将焦点移动到当前周的最后一天。 |
| PageUp | 将日期网格更改为上一个月。 |
| PageDown | 将日期网格更改为下一个月。 |
| Shift + PageUp | 将日期网格更改为上一年。 |
| Shift + PageDown | 将日期网格更改为下一年。 |
时间、月份和年份滚轮
使用时间滚轮选择器时，当列聚焦时，可以使用数字键选择小时和分钟值。
| 键 | 功能 |
|---|---|
| 上箭头 | 滚动到上一个项目。 |
| 下箭头 | 滚动到下一个项目。 |
| Home | 滚动到第一个项目。 |
| End | 滚动到最后一个项目。 |
接口
DatetimeChangeEventDetail
interface DatetimeChangeEventDetail {
value?: string | null;
}
DatetimeCustomEvent
虽然不是必需的，但此接口可以替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。
interface DatetimeCustomEvent extends CustomEvent {
detail: DatetimeChangeEventDetail;
target: HTMLIonDatetimeElement;
}
属性
cancelText
| 说明 | The text to display on the picker's cancel button. |
| 属性 | cancel-text |
| 类型 | string |
| 默认值 | 'Cancel' |
clearText
| 说明 | The text to display on the picker's "Clear" button. |
| 属性 | clear-text |
| 类型 | string |
| 默认值 | 'Clear' |
color
| 说明 | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认值 | 'primary' |
dayValues
| 说明 | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the dayValues input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like 31 in February, it will correctly not show days which are not valid for the selected month. |
| 属性 | day-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
disabled
| 说明 | If true, the user cannot interact with the datetime. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
doneText
| 说明 | The text to display on the picker's "Done" button. |
| 属性 | done-text |
| 类型 | string |
| 默认值 | 'Done' |
firstDayOfWeek
| 说明 | The first day of the week to use for ion-datetime. The default value is 0 and represents Sunday. |
| 属性 | first-day-of-week |
| 类型 | number |
| 默认值 | 0 |
formatOptions
| 说明 | Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type Intl.DateTimeFormatOptions. |
| 属性 | undefined |
| 类型 | undefined ｜ { date: DateTimeFormatOptions; time?: DateTimeFormatOptions ｜ undefined; } ｜ { date?: DateTimeFormatOptions ｜ undefined; time: DateTimeFormatOptions; } |
| 默认值 | undefined |
highlightedDates
| 说明 | Used to apply custom text and background colors to specific dates. Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors. Only applies to the date, date-time, and time-date presentations, with preferWheel="false". |
| 属性 | undefined |
| 类型 | ((dateIsoString: string) => DatetimeHighlightStyle ｜ undefined) ｜ DatetimeHighlight[] ｜ undefined |
| 默认值 | undefined |
hourCycle
| 说明 | The hour cycle of the ion-datetime. If no value is set, this is specified by the current locale. |
| 属性 | hour-cycle |
| 类型 | "h11" ｜ "h12" ｜ "h23" ｜ "h24" ｜ undefined |
| 默认值 | undefined |
hourValues
| 说明 | Values used to create the list of selectable hours. By default the hour values range from 0 to 23 for 24-hour, or 1 to 12 for 12-hour. However, to control exactly which hours to display, the hourValues input can take a number, an array of numbers, or a string of comma separated numbers. |
| 属性 | hour-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
isDateEnabled
| 说明 | Returns if an individual date (calendar day) is enabled or disabled. If true, the day will be enabled/interactive. If false, the day will be disabled/non-interactive.The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank. |
| 属性 | undefined |
| 类型 | ((dateIsoString: string) => boolean) ｜ undefined |
| 默认值 | undefined |
locale
| 说明 | The locale to use for ion-datetime. This impacts month and day name formatting. The "default" value refers to the default locale set by your device. |
| 属性 | locale |
| 类型 | string |
| 默认值 | 'default' |
max
| 说明 | The maximum datetime allowed. Value must be a date string following the ISO 8601 datetime format standard, 1996-12-19. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as 1994. Defaults to the end of this year. |
| 属性 | max |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
min
| 说明 | The minimum datetime allowed. Value must be a date string following the ISO 8601 datetime format standard, such as 1996-12-19. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as 1994. Defaults to the beginning of the year, 100 years ago from today.这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | min |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
minuteValues
| 说明 | Values used to create the list of selectable minutes. By default the minutes range from 0 to 59. However, to control exactly which minutes to display, the minuteValues input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be minuteValues="0,15,30,45". |
| 属性 | minute-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
monthValues
| 说明 | Values used to create the list of selectable months. By default the month values range from 1 to 12. However, to control exactly which months to display, the monthValues input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be monthValues="6,7,8". Note that month numbers do not have a zero-based index, meaning January's value is 1, and December's is 12. |
| 属性 | month-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
multiple
| 说明 | If true, multiple dates can be selected at once. Only applies to presentation="date" and preferWheel="false". |
| 属性 | multiple |
| 类型 | boolean |
| 默认值 | false |
name
| 说明 | The name of the control, which is submitted with the form data. |
| 属性 | name |
| 类型 | string |
| 默认值 | this.inputId |
preferWheel
| 说明 | If true, a wheel picker will be rendered instead of a calendar grid where possible. If false, a calendar grid will be rendered instead of a wheel picker where possible.A wheel picker can be rendered instead of a grid when presentation is one of the following values: "date", "date-time", or "time-date".A wheel picker will always be rendered regardless of the preferWheel value when presentation is one of the following values: "time", "month", "month-year", or "year". |
| 属性 | prefer-wheel |
| 类型 | boolean |
| 默认值 | false |
presentation
| 说明 | Which values you want to select. "date" will show a calendar picker to select the month, day, and year. "time" will show a time picker to select the hour, minute, and (optionally) AM/PM. "date-time" will show the date picker first and time picker second. "time-date" will show the time picker first and date picker second. |
| 属性 | presentation |
| 类型 | "date" ｜ "date-time" ｜ "month" ｜ "month-year" ｜ "time" ｜ "time-date" ｜ "year" |
| 默认值 | 'date-time' |
readonly
| 说明 | If true, the datetime appears normal but the selected date cannot be changed. |
| 属性 | readonly |
| 类型 | boolean |
| 默认值 | false |
showClearButton
| 说明 | If true, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the ion-datetime component. Developers can also use the button slot if they want to customize these buttons. If custom buttons are set in the button slot then the default buttons will not be rendered. |
| 属性 | show-clear-button |
| 类型 | boolean |
| 默认值 | false |
showDefaultButtons
| 说明 | If true, the default "Cancel" and "OK" buttons will be rendered at the bottom of the ion-datetime component. Developers can also use the button slot if they want to customize these buttons. If custom buttons are set in the button slot then the default buttons will not be rendered. |
| 属性 | show-default-buttons |
| 类型 | boolean |
| 默认值 | false |
showDefaultTimeLabel
| 说明 | If true, the default "Time" label will be rendered for the time selector of the ion-datetime component. Developers can also use the time-label slot if they want to customize this label. If a custom label is set in the time-label slot then the default label will not be rendered. |
| 属性 | show-default-time-label |
| 类型 | boolean |
| 默认值 | true |
showDefaultTitle
| 说明 | If true, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date. |
| 属性 | show-default-title |
| 类型 | boolean |
| 默认值 | false |
size
| 说明 | If cover, the ion-datetime will expand to cover the full width of its container. If fixed, the ion-datetime will have a fixed width. |
| 属性 | size |
| 类型 | "cover" ｜ "fixed" |
| 默认值 | 'fixed' |
titleSelectedDatesFormatter
| 说明 | A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access this from within the callback. |
| 属性 | undefined |
| 类型 | ((selectedDates: string[]) => string) ｜ undefined |
| 默认值 | undefined |
value
| 说明 | The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when multiple="true". |
| 属性 | value |
| 类型 | null ｜ string ｜ string[] ｜ undefined |
| 默认值 | undefined |
yearValues
| 说明 | Values used to create the list of selectable years. By default the year values range between the min and max datetime inputs. However, to control exactly which years to display, the yearValues input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be yearValues="2008,2012,2016,2020,2024". |
| 属性 | year-values |
| 类型 | number ｜ number[] ｜ string ｜ undefined |
| 默认值 | undefined |
事件
| Name | 说明 | 冒泡 |
|---|---|---|
ionBlur | Emitted when the datetime loses focus. | true |
ionCancel | Emitted when the datetime selection was cancelled. | true |
ionChange | Emitted when the value (selected date) has changed. | true |
ionFocus | Emitted when the datetime has focus. | true |
方法
cancel
| 说明 | Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in. |
| 签名 | cancel(closeOverlay?: boolean) => Promise<void> |
confirm
| 说明 | Confirms the selected datetime value, updates the value property, and optionally closes the popover or modal that the datetime was presented in. |
| 签名 | confirm(closeOverlay?: boolean) => Promise<void> |
reset
| 说明 | Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today. |
| 签名 | reset(startDate?: string) => Promise<void> |
CSS 阴影部分
| Name | 说明 |
|---|---|
calendar-day | The individual buttons that display a day inside of the datetime calendar. |
calendar-day active | The currently selected calendar day. |
calendar-day disabled | The calendar day that is disabled. |
calendar-day today | The calendar day that contains the current day. |
month-year-button | The button that opens the month/year picker when using a grid style layout. |
time-button | The button that opens the time picker when using a grid style layout with presentation="date-time" or "time-date". |
time-button active | The time picker button when the picker is open. |
wheel-item | The individual items when using a wheel style layout, or in the month/year picker when using a grid style layout. |
wheel-item active | The currently selected wheel-item. |
CSS 自定义属性
| Name | 说明 |
|---|---|
--background | The primary background of the datetime component. |
--background-rgb | The primary background of the datetime component in RGB format. |
--title-color | The text color of the title. |
--wheel-fade-background-rgb | The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. 255, 255, 255. |
--wheel-highlight-background | The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts. |
插槽
| Name | 说明 |
|---|---|
buttons | The buttons in the datetime. |
time-label | The label for the time selector in the datetime. |
title | The title of the datetime. |