nav-datetime-button
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.
Overview
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 React, or Kdu be sure to use the keepContentsMounted property on nav-modal or the keepContentsMounted property on nav-popover. This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
Basic Usage
Localization
The localized text on nav-datetime-button is determined by the locale property on the associated nav-datetime instance. See Datetime Localization for more details.
Usage with Modals and Popovers
nav-datetime-button must be associated with a mounted nav-datetime instance. As a result, Inline Modals and Inline Popovers with the keepContentsMounted property set to true must be used.
Properties
color
| Description | 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. |
| Attribute | color |
| Type | "danger" ๏ฝ "dark" ๏ฝ "light" ๏ฝ "medium" ๏ฝ "primary" ๏ฝ "secondary" ๏ฝ "success" ๏ฝ "tertiary" ๏ฝ "warning" ๏ฝ string & Record<never, never> ๏ฝ undefined |
| Default | 'primary' |
datetime
| Description | The ID of the nav-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 |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native HTML button that wraps the slotted text. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
date-target | Content displayed inside of the date button. |
time-target | Content displayed inside of the time button. |