Datetime Button links with a Datetime component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more.
Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the keepContentsMounted property on ion-modal or the keepContentsMounted property on ion-popover. This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
The localized text on ion-datetime-button is determined by the locale property on the associated ion-datetime instance. See Datetime Localization for more details.
You can customize the format of the date and time in a Datetime Button by providing formatOptions on the associated Datetime instance. See Datetime Format Options for more details.
ion-datetime-button must be associated with a mounted ion-datetime instance. As a result, Inline Modals and Inline Popovers with the keepContentsMounted property set to true must be used.
"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. Attribute color Type "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined Default 'primary' datetime Description The ID of the ion-datetime instance associated with the datetime button. Attribute datetime Type string ｜ undefined Default undefined disabled Description If true, the user cannot interact with the button. Attribute disabled Type boolean Default false mode Description The mode determines which platform styles to use. Attribute mode Type "ios" ｜ "md" Default undefined
No events available for this component.
No public methods available for this component.
Name Descriptionnative The native HTML button that wraps the slotted text.
No CSS custom properties available for this component.
Name Descriptiondate-target Content displayed inside of the date button. time-target Content displayed inside of the time button.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4