# ion-datetime-button

URL: https://ionicframework.com/docs/api/datetime-button

**Encapsulation**: [shadow](/docs/reference/glossary.md#shadow)

Datetime Button links with a [Datetime](/docs/api/datetime.md) 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 Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](/docs/api/modal.md#prop-keep-contents-mounted) or the [keepContentsMounted property on ion-popover](/docs/api/popover.md#prop-keep-contents-mounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.

## Basic Usage

**JavaScript**

```html
<ion-datetime-button datetime="datetime"></ion-datetime-button>

<ion-modal>
  <ion-datetime id="datetime"></ion-datetime>
</ion-modal>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime-button datetime="datetime"></ion-datetime-button>

<ion-modal [keepContentsMounted]="true">
  <ng-template>
    <ion-datetime id="datetime"></ion-datetime>
  </ng-template>
</ion-modal>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonDatetime, IonDatetimeButton, IonModal],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';
function Example() {
  return (
    <>
      <IonDatetimeButton datetime="datetime"></IonDatetimeButton>

      <IonModal keepContentsMounted={true}>
        <IonDatetime id="datetime"></IonDatetime>
      </IonModal>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime-button datetime="datetime"></ion-datetime-button>

  <ion-modal :keep-contents-mounted="true">
    <ion-datetime id="datetime"></ion-datetime>
  </ion-modal>
</template>

<script setup lang="ts">
  import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/vue';
</script>
```

## Localization

The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. Refer to [Datetime Localization](/docs/api/datetime.md#localization) for more details.

## Format Options

You can customize the format of the date and time in a Datetime Button by providing `formatOptions` on the associated Datetime instance. Refer to [Datetime Format Options](/docs/api/datetime.md#format-options) for more details.

**JavaScript**

```html
<ion-datetime-button datetime="datetime"></ion-datetime-button>

<ion-modal keep-contents-mounted="true">
  <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00"></ion-datetime>
</ion-modal>

<script>
  const datetime = document.querySelector('ion-datetime');
  datetime.formatOptions = {
    date: {
      weekday: 'short',
      month: 'long',
      day: '2-digit',
    },
    time: {
      hour: '2-digit',
      minute: '2-digit',
    },
  };
</script>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime-button datetime="datetime"></ion-datetime-button>

<ion-modal [keepContentsMounted]="true">
  <ng-template>
    <ion-datetime
      id="datetime"
      presentation="date-time"
      value="2023-11-02T01:22:00"
      [formatOptions]="{
        date: {
          weekday: 'short',
          month: 'long',
          day: '2-digit',
        },
        time: {
          hour: '2-digit',
          minute: '2-digit',
        },
      }"
    ></ion-datetime>
  </ng-template>
</ion-modal>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonDatetime, IonDatetimeButton, IonModal],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';

function Example() {
  return (
    <>
      <IonDatetimeButton datetime="datetime"></IonDatetimeButton>

      <IonModal keepContentsMounted={true}>
        <IonDatetime
          id="datetime"
          presentation="date-time"
          value="2023-11-02T01:22:00"
          formatOptions={{
            date: {
              weekday: 'short',
              month: 'long',
              day: '2-digit',
            },
            time: {
              hour: '2-digit',
              minute: '2-digit',
            },
          }}
        ></IonDatetime>
      </IonModal>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime-button datetime="datetime"></ion-datetime-button>

  <ion-modal :keep-contents-mounted="true">
    <ion-datetime
      id="datetime"
      presentation="date-time"
      value="2023-11-02T01:22:00"
      :format-options="formatOptions"
    ></ion-datetime>
  </ion-modal>
</template>

<script setup lang="ts">
  import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/vue';

  const formatOptions = {
    date: {
      weekday: 'short',
      month: 'long',
      day: '2-digit',
    },
    time: {
      hour: '2-digit',
      minute: '2-digit',
    },
  };
</script>
```

## Usage with Modals and Popovers

`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](/docs/api/modal.md#inline-modals-recommended) and [Inline Popovers](/docs/api/popover.md#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](/docs/theming/basics.md).

**Attribute**: `color`

**Type**: `"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined`

**Default**: `undefined`

### 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. This is a [virtual property](/docs/core-concepts/fundamentals.md#virtual-properties) that is set once during initialization and will not update if you change its value after the initial render.

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