跳到主要内容
版本：v8

日期时间组件

shadow

日期时间组件提供了一个日历界面和时间滚轮，让用户可以轻松选择日期和时间。它类似于原生的 datetime-local 类型的 input 元素，但 Ionic Framework 的 Datetime 组件可以更轻松地以首选格式显示日期和时间，并管理日期时间值。

概述​

一直以来，在 JavaScript 甚至 HTML 输入框中处理日期时间值都是一项挑战。尤其是 JavaScript 的 Date 对象，很难正确解析日期时间字符串或格式化日期时间值。更糟糕的是，不同的浏览器和 JavaScript 版本会以不同方式解析各种日期时间字符串，特别是针对不同地区。

幸运的是，Ionic Framework 的日期时间输入组件被设计成可以让开发者避开这些常见的陷阱，让开发者能够轻松地操作日期时间值，并为用户提供一个简单易用的日期时间选择器，从而获得出色的用户体验。

ISO 8601 日期时间格式：YYYY-MM-DDTHH:mmZ​

Ionic Framework 使用 ISO 8601 日期时间格式 作为其 value 的值。该值只是一个字符串，而不是使用 JavaScript 的 Date 对象。使用 ISO 日期时间格式可以方便地在 JSON 对象和数据库中进行序列化和解析。

以下是可用于 ion-datetime 的一些 ISO 8601 格式示例：

描述格式日期时间值示例
年YYYY1994
年和月YYYY-MM1994-12
完整日期YYYY-MM-DD1994-12-15
日期和时间YYYY-MM-DDTHH:mm1994-12-15T13:47
UTC 时区YYYY-MM-DDTHH:mm:ssZ1994-12-15T13:47:20Z
时区偏移量YYYY-MM-DDTHH:mm:ssTZD1994-12-15T13:47:20+05:00
小时和分钟HH:mm13:47

请注意，年份始终为四位数，毫秒（如果添加）始终为三位数，而所有其他部分始终为两位数。因此，表示一月的数字始终带有前导零，例如 01。此外，小时始终采用 24 小时制，因此 00 表示 12 小时制中的午夜 12 点，13 表示下午 1 点，23 表示晚上 11 点。

备注

虽然可以使用 ISO 8601 日期时间格式指定秒、毫秒和时区，但 ion-datetime 不提供选择秒、毫秒和时区的界面。提供的任何秒、毫秒或时区值都将被忽略。

基本用法​

与日期时间按钮一起使用​

如果需要在模态框或弹出框等覆盖层中展示日期时间，我们建议使用 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 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 开始。
备注

来源：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle

在某些情况下，您可能需要更精细地控制使用哪种小时周期。这时 hourCycle 属性就能派上用场。

在以下示例中，即使区域设置为默认使用 24 小时制的 en-GB，我们也可以使用 hourCycle 属性强制 ion-datetime 使用 12 小时制：

一周的第一天​

对于 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 配置的日期时间组件。

滚轮式选择器​

默认情况下，使用 presentation 时，Ionic 会优先显示网格样式布局。但是，可以使用 preferWheel 属性来显示滚轮样式。当 preferWheel 为 true 时，Ionic 会在可能的情况下优先显示滚轮样式布局。

某些 presentation 选项同时具有网格样式和滚轮样式，开发者可以通过 preferWheel 属性进行选择。其他 presentation 值只有滚轮样式，永远不会显示网格样式。下表显示了哪些 presentation 值具有网格或滚轮样式。

presentation有网格样式？有滚轮样式？
date是是
date-time是是
month否是
month-year否是
time否是
time-date是是
year否是

下面的示例展示了 presentation="date-time" 的滚轮选择器。

显示相邻月份日期​

如果将 showAdjacentDays 属性设置为 true，则会显示上个月和下个月的日期，以填充日历视图开头或结尾的任何空白区域。当用户点击启用的相邻日期时，日历将平滑地动画过渡到显示该月份的视图。

启用 showAdjacentDays 后，日历视图始终显示 6 行，因此会根据需要显示上个月或下个月的日期来填充网格。例如，即使某个月从一周的第一天开始，并且在第五行结束，下个月的日期也会出现在末尾以完成第六行。

备注

此属性仅在 presentation="date" 且 preferWheel="false" 时受支持。

多日期选择​

如果将 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）都可以自动利用此主题。

日期时间头部​

日期时间头部管理 title 插槽和所选日期的内容。

备注

如果 preferWheel 设置为 true，则不会渲染所选日期。

日历头部​

使用网格样式布局时，日历头部管理日期导航控件（月份/年份选择器和上/下个月按钮）以及星期几。

可以使用 CSS 阴影部分设置头部的样式。

日历日期​

网格样式的 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); // 输出: 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点击（激活）可聚焦元素。

日期网格​

键描述
上箭头将焦点移动到前一周的同一天。
下箭头将焦点移动到下一周的同一天。
右箭头将焦点移动到下一天。
左箭头将焦点移动到前一天。
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​

DescriptionThe text to display on the picker's cancel button.
Attributecancel-text
Typestring
Default'Cancel'

clearText​

DescriptionThe text to display on the picker's "Clear" button.
Attributeclear-text
Typestring
Default'Clear'

color​

DescriptionThe 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.
Attributecolor
Type"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
Default'primary'

dayValues​

DescriptionValues 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.
Attributeday-values
Typenumber ｜ number[] ｜ string ｜ undefined
Defaultundefined

disabled​

DescriptionIf true, the user cannot interact with the datetime.
Attributedisabled
Typeboolean
Defaultfalse

doneText​

DescriptionThe text to display on the picker's "Done" button.
Attributedone-text
Typestring
Default'Done'

firstDayOfWeek​

DescriptionThe first day of the week to use for ion-datetime. The default value is 0 and represents Sunday.
Attributefirst-day-of-week
Typenumber
Default0

formatOptions​

DescriptionFormatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type Intl.DateTimeFormatOptions.
Attributeundefined
Typeundefined ｜ { date: DateTimeFormatOptions; time?: DateTimeFormatOptions ｜ undefined; } ｜ { date?: DateTimeFormatOptions ｜ undefined; time: DateTimeFormatOptions; }
Defaultundefined

highlightedDates​

DescriptionUsed 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".
Attributeundefined
Type((dateIsoString: string) => DatetimeHighlightStyle ｜ undefined) ｜ DatetimeHighlight[] ｜ undefined
Defaultundefined

hourCycle​

DescriptionThe hour cycle of the ion-datetime. If no value is set, this is specified by the current locale.
Attributehour-cycle
Type"h11" ｜ "h12" ｜ "h23" ｜ "h24" ｜ undefined
Defaultundefined

hourValues​

DescriptionValues 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.
Attributehour-values
Typenumber ｜ number[] ｜ string ｜ undefined
Defaultundefined

isDateEnabled​

DescriptionReturns 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.
Attributeundefined
Type((dateIsoString: string) => boolean) ｜ undefined
Defaultundefined

locale​

DescriptionThe 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.
Attributelocale
Typestring
Default'default'

max​

DescriptionThe 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.
Attributemax
Typestring ｜ undefined
Defaultundefined

min​

DescriptionThe 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.

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemin
Typestring ｜ undefined
Defaultundefined

minuteValues​

DescriptionValues 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".
Attributeminute-values
Typenumber ｜ number[] ｜ string ｜ undefined
Defaultundefined

mode​

DescriptionThe mode determines which platform styles to use.

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" ｜ "md"
Defaultundefined

monthValues​

DescriptionValues 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.
Attributemonth-values
Typenumber ｜ number[] ｜ string ｜ undefined
Defaultundefined

multiple​

DescriptionIf true, multiple dates can be selected at once. Only applies to presentation="date" and preferWheel="false".
Attributemultiple
Typeboolean
Defaultfalse

name​

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.inputId

preferWheel​

DescriptionIf 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".
Attributeprefer-wheel
Typeboolean
Defaultfalse

presentation​

DescriptionWhich 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.
Attributepresentation
Type"date" ｜ "date-time" ｜ "month" ｜ "month-year" ｜ "time" ｜ "time-date" ｜ "year"
Default'date-time'

readonly​

DescriptionIf true, the datetime appears normal but the selected date cannot be changed.
Attributereadonly
Typeboolean
Defaultfalse

showAdjacentDays​

DescriptionIf true, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
Attributeshow-adjacent-days
Typeboolean
Defaultfalse

showClearButton​

DescriptionIf 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.
Attributeshow-clear-button
Typeboolean
Defaultfalse

showDefaultButtons​

DescriptionIf 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.
Attributeshow-default-buttons
Typeboolean
Defaultfalse

showDefaultTimeLabel​

DescriptionIf 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.
Attributeshow-default-time-label
Typeboolean
Defaulttrue

showDefaultTitle​

DescriptionIf true, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
Attributeshow-default-title
Typeboolean
Defaultfalse

size​

DescriptionIf cover, the ion-datetime will expand to cover the full width of its container. If fixed, the ion-datetime will have a fixed width.
Attributesize
Type"cover" ｜ "fixed"
Default'fixed'

titleSelectedDatesFormatter​

DescriptionA 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.
Attributeundefined
Type((selectedDates: string[]) => string) ｜ undefined
Defaultundefined

value​

DescriptionThe value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when multiple="true".
Attributevalue
Typenull ｜ string ｜ string[] ｜ undefined
Defaultundefined

yearValues​

DescriptionValues 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".
Attributeyear-values
Typenumber ｜ number[] ｜ string ｜ undefined
Defaultundefined

事件​

NameDescriptionBubbles
ionBlurEmitted when the datetime loses focus.true
ionCancelEmitted when the datetime selection was cancelled.true
ionChangeEmitted when the value (selected date) has changed.

This event will not emit when programmatically setting the value property.		true
ionFocusEmitted when the datetime has focus.true

方法​

cancel​

DescriptionEmits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.
Signaturecancel(closeOverlay?: boolean) => Promise<void>
ParameterscloseOverlay: If true, closes the parent overlay. Defaults to false.

confirm​

DescriptionConfirms the selected datetime value, updates the value property, and optionally closes the popover or modal that the datetime was presented in.
Signatureconfirm(closeOverlay?: boolean) => Promise<void>
ParameterscloseOverlay: If true, closes the parent overlay. Defaults to false.

reset​

DescriptionResets 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.
Signaturereset(startDate?: string) => Promise<void>
ParametersstartDate: A valid ISO-8601 string to reset the datetime state to.

CSS 阴影部分​

NameDescription
calendar-dayThe individual buttons that display a day inside of the datetime calendar.
calendar-day activeThe currently selected calendar day.
calendar-day disabledThe calendar day that is disabled.
calendar-day todayThe calendar day that contains the current day.
calendar-days-of-weekThe container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout.
calendar-headerThe calendar header manages the date navigation controls (month/year picker and previous/next buttons) and the days of the week when using a grid style layout.
datetime-headerThe datetime header contains the content for the title slot and the selected date.
datetime-selected-dateThe element that contains the selected date.
datetime-titleThe element that contains the title slot content.
month-year-buttonThe button that opens the month/year picker when using a grid style layout.
navigation-buttonThe buttons used to navigate to the next or previous month when using a grid style layout.
next-buttonThe button used to navigate to the next month when using a grid style layout.
previous-buttonThe button used to navigate to the previous month when using a grid style layout.
time-buttonThe button that opens the time picker when using a grid style layout with presentation="date-time" or "time-date".
time-button activeThe time picker button when the picker is open.
wheelThe wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
wheel-itemThe individual items when using a wheel style layout, or in the month/year picker when using a grid style layout.
wheel-item activeThe currently selected wheel-item.

CSS 自定义属性​

NameDescription
--backgroundThe primary background of the datetime component.
--background-rgbThe primary background of the datetime component in RGB format.
--title-colorThe text color of the title.
--wheel-fade-background-rgbThe 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-backgroundThe background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts.
--wheel-highlight-border-radiusThe border radius of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts.

插槽​

NameDescription
buttonsThe buttons in the datetime.
time-labelThe label for the time selector in the datetime.
titleThe title of the datetime.

Contents

编辑此页