# ion-datetime

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

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

Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values.

## Overview

Historically, handling datetime values within JavaScript, or even within HTML inputs, has always been a challenge. Specifically, JavaScript's `Date` object is notoriously difficult to correctly parse apart datetime strings or to format datetime values. Even worse is how different browsers and JavaScript versions parse various datetime strings differently, especially per locale.

Fortunately, Ionic Framework's datetime input has been designed so developers can avoid the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience.

### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ`

Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) for its value. The value is simply a string, rather than using JavaScript's `Date` object. Using the ISO datetime format makes it easy to serialize and parse within JSON objects and databases.

Below are some examples of ISO 8601 formats that can be used with `ion-datetime`:

| Description | Format | Datetime Value Example |
| --- | --- | --- |
| Year | `YYYY` | `1994` |
| Year and Month | `YYYY-MM` | `1994-12` |
| Complete Date | `YYYY-MM-DD` | `1994-12-15` |
| Date and Time | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` |
| UTC Timezone | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` |
| Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` |
| Hour and Minute | `HH:mm` | `13:47` |

Note that the year is always four-digits, milliseconds (if it's added) is always three-digits, and all others are always two-digits. So the number representing January always has a leading zero, such as `01`. Additionally, the hour is always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means `1pm`, and `23` means `11pm`.

**Note**

While seconds, milliseconds, and time zone can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second, millisecond, and time zone selection. Any second, millisecond, or time zone values provided will be ignored.

## Basic Usage

**JavaScript**

```html
<ion-datetime></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime></ion-datetime>
</template>

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

## Usage with Datetime Button

If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](/docs/api/datetime-button.md). `ion-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.

## Setting Values Asynchronously

If its `value` is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the `value` in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's `value` is loaded by an asynchronous process, it is recommended to hide the datetime with CSS until the value has finished updating.

## Date Constraints

### Max and Min Dates

To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user.

The following example restricts date selection to March 2022 through May 2022 only.

**JavaScript**

```html
<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime value="2022-04-21T00:00:00" min="2022-03-01T00:00:00" max="2022-05-31T23:59:59"></ion-datetime>
</template>

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

### Selecting Specific Values

While the `min` and `max` properties allow you to restrict date selection to a certain range, the `monthValues`, `dayValues`, `yearValues`, `hourValues`, and `minuteValues` properties allow you choose specific days and times that users can select.

The following example allows minutes to be selected in increments of 15. It also allows for days to be selected in increments of 5.

**JavaScript**

```html
<ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime minuteValues="0,15,30,45" dayValues="5,10,15,20,25,30"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime minute-values="0,15,30,45" day-values="5,10,15,20,25,30"></ion-datetime>
</template>

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

### Advanced Date Constraints

With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string. The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. 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.

The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`.

**JavaScript**

```html
<ion-datetime></ion-datetime>

<script>
  const datetime = document.querySelector('ion-datetime');
  datetime.isDateEnabled = (dateString) => {
    const date = new Date(dateString);
    const utcDay = date.getUTCDay();

    /**
     * Date will be enabled if it is not
     * Sunday or Saturday
     */
    return utcDay !== 0 && utcDay !== 6;
  };
</script>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime [isDateEnabled]="isWeekday"></ion-datetime>
```

`src/app/example.component.ts`

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

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonDatetime],
})
export class ExampleComponent {
  isWeekday = (dateString: string) => {
    const date = new Date(dateString);
    const utcDay = date.getUTCDay();

    /**
     * Date will be enabled if it is not
     * Sunday or Saturday
     */
    return utcDay !== 0 && utcDay !== 6;
  };
}
```

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  const isWeekday = (dateString: string) => {
    const date = new Date(dateString);
    const utcDay = date.getUTCDay();

    /**
     * Date will be enabled if it is not
     * Sunday or Saturday
     */
    return utcDay !== 0 && utcDay !== 6;
  };

  return <IonDatetime isDateEnabled={isWeekday}></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime :is-date-enabled="isWeekday"></ion-datetime>
</template>

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

  const isWeekday = (dateString: string) => {
    const date = new Date(dateString);
    const utcDay = date.getUTCDay();

    /**
     * Date will be enabled if it is not
     * Sunday or Saturday
     */
    return utcDay !== 0 && utcDay !== 6;
  };
</script>
```

## Localization

Ionic Framework makes use of the [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device.

### Custom Locale

For instances where you need a specific locale, you can use the `locale` property to set it. The locale controls both the language and the date and time formats that are displayed.

The following example shows how to set the locale to Spanish (Spain).

**JavaScript**

```html
<ion-datetime locale="es-ES"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime locale="es-ES"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime locale="es-ES"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime locale="es-ES"></ion-datetime>
</template>

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

**Note**

The time label is not automatically localized. Refer to [Time Label](#time-label) for more information.

### Hour Cycle

`ion-datetime` will use the hour cycle that is specified by the `locale` property by default. For example, if `locale` is set to `en-US`, then `ion-datetime` will use a 12 hour cycle.

There are 4 primary hour cycle types:

| Hour cycle type | Description |
| --- | --- |
| `'h12'` | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. |
| `'h23'` | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. |
| `'h11'` | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. |
| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. |

**Note**

Source: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle)

There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help.

In the following example, we can use the `hourCycle` property to force `ion-datetime` to use the 12 hour cycle even though the locale is `en-GB`, which uses a 24 hour cycle by default:

**JavaScript**

```html
<ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime locale="en-GB" hourCycle="h12"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime locale="en-GB" hourCycle="h12"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime locale="en-GB" hour-cycle="h12"></ion-datetime>
</template>

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

### First Day of the Week

For `ion-datetime`, the default first day of the week is Sunday. As of 2022, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (refer to [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) ).

**JavaScript**

```html
<ion-datetime first-day-of-week="1"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime [firstDayOfWeek]="1"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime firstDayOfWeek={1}></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime :first-day-of-week="1"></ion-datetime>
</template>

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

### Time Label

The time label is not automatically localized. Fortunately, Ionic makes it easy to provide custom localizations with the `time-label` slot.

**JavaScript**

```html
<ion-datetime locale="es-ES">
  <span slot="time-label">Tiempo</span>
</ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime locale="es-ES">
  <span slot="time-label">Tiempo</span>
</ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return (
    <IonDatetime locale="es-ES">
      <span slot="time-label">Tiempo</span>
    </IonDatetime>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime locale="es-ES">
    <span slot="time-label">Tiempo</span>
  </ion-datetime>
</template>

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

### Locale Extension Tags

`ion-datetime` also supports [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) as part of the `Intl.Locale` API. These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) in their apps.

For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you could provide extension tags instead of using both the `locale` and `hourCycle` properties:

**JavaScript**

```html
<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime locale="en-GB-u-hc-h12"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime locale="en-GB-u-hc-h12"></ion-datetime>
</template>

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

**Note**

Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app.

## Presentation

By default, `ion-datetime` allows users to select both date and time. In addition, users have access to selecting the specific month, year, hour, and minute.

Some use cases may call for only date selection or only time selection. The `presentation` property allows you to specify which pickers to show and the order to show them in. For example, setting `date-time` will have the calendar picker appear before the time picker. Setting `time-date` will have the calendar picker appear after the time picker.

### Month and Year Selection

Month and year selection is available by passing `month-year`, `month`, or `year` to the `presentation` property.

This example shows a datetime with the `month-year` configuration.

**JavaScript**

```html
<ion-datetime presentation="month-year"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="month-year"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime presentation="month-year"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime presentation="month-year"></ion-datetime>
</template>

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

### Time Selection

Time selection is available by passing `date-time`, `time-date`, or `time` to the `presentation` property.

This example shows a datetime with the `time` configuration.

**JavaScript**

```html
<ion-datetime presentation="time"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="time"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime presentation="time"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime presentation="time"></ion-datetime>
</template>

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

### Date Selection

Date selection is available by passing `date-time`, `time-date`, or `date` to the `presentation` property.

This example shows a datetime with the `date` configuration.

**JavaScript**

```html
<ion-datetime presentation="date"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime presentation="date"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime presentation="date"></ion-datetime>
</template>

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

### Wheel Style Pickers

By default, Ionic will prefer to show a grid style layout when using `presentation`. However, it is possible to show a wheel style using the `preferWheel` property. When `preferWheel` is `true`, Ionic will prefer to show the wheel style layout when possible.

Certain `presentation` options have both grid and wheel styles that developers can choose from with the `preferWheel` property. Other `presentation` values only have a wheel style and will never show a grid style. The table below shows which `presentation` values have grid or wheel styles.

| `presentation` | Has Grid Style? | Has Wheel Style? |
| --- | --- | --- |
| `date` | Yes | Yes |
| `date-time` | Yes | Yes |
| `month` | No | Yes |
| `month-year` | No | Yes |
| `time` | No | Yes |
| `time-date` | Yes | Yes |
| `year` | No | Yes |

The example below shows the wheel picker with `presentation="date-time"`.

**JavaScript**

```html
<ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime presentation="date-time" preferWheel={true}></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime presentation="date-time" :prefer-wheel="true"></ion-datetime>
</template>

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

## Show Adjacent Days

If the `showAdjacentDays` property is set to `true`, days from the previous and next month will be displayed in the calendar view to fill any empty spaces at the beginning or end of the month. When a user clicks on an enabled adjacent day, the calendar will smoothly animate to show that month's view.

The calendar view always displays 6 rows when `showAdjacentDays` is enabled, so days from the previous or next month will be shown as needed to fill the grid. For example, even if a month starts on the first day of the week and ends within the fifth row, days from the next month will appear at the end to complete the sixth row.

**Note**

This property is only supported when using `presentation="date"` and `preferWheel="false"`.

**JavaScript**

```html
<ion-datetime show-adjacent-days="true"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime show-adjacent-days="true"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React, { useRef, useEffect } from 'react';
import { IonDatetime } from '@ionic/react';

function Example() {
  return <IonDatetime showAdjacentDays={true}></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime show-adjacent-days="true"></ion-datetime>
</template>

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

## Multiple Date Selection

If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.

**Note**

This property is only supported when using `presentation="date"` and `preferWheel="false"`.

**JavaScript**

```html
<ion-datetime presentation="date" multiple="true"></ion-datetime>

<script>
  const datetime = document.querySelector('ion-datetime');
  datetime.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
</script>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date" [multiple]="true" [value]="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React, { useRef, useEffect } from 'react';
import { IonDatetime } from '@ionic/react';

function Example() {
  const datetime = useRef<null | HTMLIonDatetimeElement>(null);

  useEffect(() => {
    if (!datetime.current) return;
    datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
  }, []);

  return <IonDatetime ref={datetime} presentation="date" multiple={true}></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime presentation="date" :multiple="true" :value="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
</template>

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

## Titles

By default, `ion-datetime` does not show any header or title associated with the component. Developers can use the `showDefaultTitle` property to show the default title/header configuration. They can also use the `title` slot to customize what is rendered in the header.

### Showing the Default Title

**JavaScript**

```html
<ion-datetime show-default-title="true"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime [showDefaultTitle]="true"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime showDefaultTitle={true}></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime :show-default-title="true"></ion-datetime>
</template>

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

### Customizing the Title

**JavaScript**

```html
<ion-datetime>
  <span slot="title">Select a Reservation Date</span>
</ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime>
  <span slot="title">Select a Reservation Date</span>
</ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return (
    <IonDatetime>
      <span slot="title">Select a Reservation Date</span>
    </IonDatetime>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime>
    <span slot="title">Select a Reservation Date</span>
  </ion-datetime>
</template>

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

## Format Options

You can customize the format of the date in the header text and the time in the time button of a Datetime component by providing `formatOptions`. The `date` and `time` in the `formatOptions` property should each be an [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) object. If `formatOptions` is not provided, default formats will be used for dates and times.

Datetime [does not manipulate or set](#time-zones) the time zone. If `timeZone` or `timeZoneName` are provided, they will be ignored, and the time zone will be set to UTC. This ensures that the displayed value matches the selected value, rather than being converted to the user's current time zone.

Be careful with the options you provide, as they may not match the selected presentation. For example, providing `minute: 'numeric'` for a presentation of `month` may lead to unexpected behavior, displaying a month where only a time might be expected.

**JavaScript**

```html
<ion-datetime value="2023-11-02T01:22:00">
  <span slot="title">Select Date</span>
</ion-datetime>

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

**Angular**

`src/app/example.component.html`

```html
<ion-datetime
  value="2023-11-02T01:22:00"
  [formatOptions]="{
      time: { hour: '2-digit', minute: '2-digit' },
      date: { day: '2-digit', month: 'long' },
    }"
>
  <span slot="title">Select Date</span>
</ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

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

function Example() {
  return (
    <IonDatetime
      value="2023-11-02T01:22:00"
      formatOptions={{
        time: { hour: '2-digit', minute: '2-digit' },
        date: { day: '2-digit', month: 'long' },
      }}
    >
      <span slot="title">Select Date</span>
    </IonDatetime>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime value="2023-11-02T01:22:00" :format-options="formatOptions">
    <span slot="title">Select Date</span>
  </ion-datetime>
</template>

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

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

## Buttons

By default, `ionChange` is emitted with the new datetime value whenever a new date is selected. To require user confirmation before emitting `ionChange`, you can either set the `showDefaultButtons` property to `true` or use the `buttons` slot to pass in a custom confirmation button. When passing in custom buttons, the confirm button must call the `confirm` method on `ion-datetime` for `ionChange` to be emitted.

### Showing Confirmation Buttons

The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#method-confirm) and [`cancel`](#method-cancel) methods, respectively.

**JavaScript**

```html
<ion-datetime show-default-buttons="true"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime [showDefaultButtons]="true"></ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime showDefaultButtons={true}></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime :show-default-buttons="true"></ion-datetime>
</template>

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

### Customizing Button Texts

For simple use cases, developers can provide custom button text to the confirmation and cancel values through the `doneText` and `cancelText` properties. We recommend doing this when you only need to change the button text and do not need any custom behavior.

**JavaScript**

```html
<ion-datetime show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime [showDefaultButtons]="true" doneText="All set" cancelText="Never mind"> </ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React, { useRef } from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return <IonDatetime showDefaultButtons={true} doneText="All set" cancelText="Never mind"></IonDatetime>;
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime :show-default-buttons="true" done-text="All set" cancel-text="Never mind"></ion-datetime>
</template>

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

### Customizing Button Elements

Developers can provide their own buttons for advanced custom behavior.

`ion-datetime` has `confirm`, `cancel`, and `reset` methods that developers can call when clicking on custom buttons. The `reset` method also allows developers to provide a date to reset the datetime to.

**JavaScript**

```html
<ion-datetime>
  <ion-buttons slot="buttons">
    <ion-button color="danger" onclick="datetime.reset()">Reset</ion-button>
    <ion-button color="primary" onclick="datetime.cancel()">Never mind</ion-button>
    <ion-button color="primary" onclick="datetime.confirm()">All Set</ion-button>
  </ion-buttons>
</ion-datetime>

<script>
  var datetime = document.querySelector('ion-datetime');
</script>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime #datetime>
  <ion-buttons slot="buttons">
    <ion-button color="danger" (click)="datetime.reset()">Reset</ion-button>
    <ion-button color="primary" (click)="datetime.cancel()">Never mind</ion-button>
    <ion-button color="primary" (click)="datetime.confirm()">All Set</ion-button>
  </ion-buttons>
</ion-datetime>
```

`src/app/example.component.ts`

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

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

**React**

```tsx
import React, { useRef } from 'react';
import { IonButtons, IonButton, IonDatetime } from '@ionic/react';
function Example() {
  const datetime = useRef<null | HTMLIonDatetimeElement>(null);
  const reset = () => {
    datetime.current?.reset();
  };
  const cancel = () => {
    datetime.current?.cancel();
  };
  const confirm = () => {
    datetime.current?.confirm();
  };
  return (
    <IonDatetime ref={datetime}>
      <IonButtons slot="buttons">
        <IonButton color="danger" onClick={reset}>
          Reset
        </IonButton>
        <IonButton color="primary" onClick={cancel}>
          Never mind
        </IonButton>
        <IonButton color="primary" onClick={confirm}>
          All Set
        </IonButton>
      </IonButtons>
    </IonDatetime>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime ref="datetime">
    <ion-buttons slot="buttons">
      <ion-button color="danger" @click="reset()">Reset</ion-button>
      <ion-button color="primary" @click="cancel()">Never mind</ion-button>
      <ion-button color="primary" @click="confirm()">All Set</ion-button>
    </ion-buttons>
  </ion-datetime>
</template>

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

  const datetime = ref();
  const reset = () => datetime.value.$el.reset();
  const cancel = () => datetime.value.$el.cancel();
  const confirm = () => datetime.value.$el.confirm();
</script>
```

## Highlighting Specific Dates

Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.

When specifying colors, any valid CSS color format can be used. This includes hex codes, `rgba`, [color variables](/docs/theming/colors.md), etc.

To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.

**Note**

This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.

### Using Array

An array is better when the highlights apply to fixed dates, such as due dates.

**JavaScript**

```html
<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>

<script>
  var datetime = document.querySelector('ion-datetime');
  datetime.highlightedDates = [
    {
      date: '2023-01-05',
      textColor: '#800080',
      backgroundColor: '#ffc0cb',
      border: '1px solid #e91e63',
    },
    {
      date: '2023-01-10',
      textColor: '#09721b',
      backgroundColor: '#c8e5d0',
      border: '1px solid #4caf50',
    },
    {
      date: '2023-01-20',
      textColor: 'var(--ion-color-secondary)',
      backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
      border: '1px solid var(--ion-color-secondary-shade)',
    },
    {
      date: '2023-01-23',
      textColor: 'rgb(68, 10, 184)',
      backgroundColor: 'rgb(211, 200, 229)',
      border: '1px solid rgb(103, 58, 183)',
    },
  ];
</script>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date" value="2023-01-01" [highlightedDates]="highlightedDates"></ion-datetime>
```

`src/app/example.component.ts`

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

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonDatetime],
})
export class ExampleComponent {
  highlightedDates = [
    {
      date: '2023-01-05',
      textColor: '#800080',
      backgroundColor: '#ffc0cb',
      border: '1px solid #e91e63',
    },
    {
      date: '2023-01-10',
      textColor: '#09721b',
      backgroundColor: '#c8e5d0',
      border: '1px solid #4caf50',
    },
    {
      date: '2023-01-20',
      textColor: 'var(--ion-color-secondary)',
      backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
      border: '1px solid var(--ion-color-secondary-shade)',
    },
    {
      date: '2023-01-23',
      textColor: 'rgb(68, 10, 184)',
      backgroundColor: 'rgb(211, 200, 229)',
      border: '1px solid rgb(103, 58, 183)',
    },
  ];
}
```

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return (
    <IonDatetime
      presentation="date"
      value="2023-01-01"
      highlightedDates={[
        {
          date: '2023-01-05',
          textColor: '#800080',
          backgroundColor: '#ffc0cb',
          border: '1px solid #e91e63',
        },
        {
          date: '2023-01-10',
          textColor: '#09721b',
          backgroundColor: '#c8e5d0',
          border: '1px solid #4caf50',
        },
        {
          date: '2023-01-20',
          textColor: 'var(--ion-color-secondary)',
          backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
          border: '1px solid var(--ion-color-secondary-shade)',
        },
        {
          date: '2023-01-23',
          textColor: 'rgb(68, 10, 184)',
          backgroundColor: 'rgb(211, 200, 229)',
          border: '1px solid rgb(103, 58, 183)',
        },
      ]}
    ></IonDatetime>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime presentation="date" value="2023-01-01" :highlighted-dates="highlightedDates"></ion-datetime>
</template>

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

  const highlightedDates = [
    {
      date: '2023-01-05',
      textColor: '#800080',
      backgroundColor: '#ffc0cb',
      border: '1px solid #e91e63',
    },
    {
      date: '2023-01-10',
      textColor: '#09721b',
      backgroundColor: '#c8e5d0',
      border: '1px solid #4caf50',
    },
    {
      date: '2023-01-20',
      textColor: 'var(--ion-color-secondary)',
      backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
      border: '1px solid var(--ion-color-secondary-shade)',
    },
    {
      date: '2023-01-23',
      textColor: 'rgb(68, 10, 184)',
      backgroundColor: 'rgb(211, 200, 229)',
      border: '1px solid rgb(103, 58, 183)',
    },
  ];
</script>
```

### Using Callback

A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.

**JavaScript**

```html
<ion-datetime presentation="date"></ion-datetime>

<script>
  var datetime = document.querySelector('ion-datetime');
  datetime.highlightedDates = (isoString) => {
    const date = new Date(isoString);
    const utcDay = date.getUTCDate();

    if (utcDay % 5 === 0) {
      return {
        textColor: '#800080',
        backgroundColor: '#ffc0cb',
        border: '1px solid #e91e63',
      };
    }

    if (utcDay % 3 === 0) {
      return {
        textColor: 'var(--ion-color-secondary)',
        backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
        border: '1px solid var(--ion-color-secondary-shade)',
      };
    }

    return undefined;
  };
</script>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date" [highlightedDates]="highlightedDates"></ion-datetime>
```

`src/app/example.component.ts`

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

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonDatetime],
})
export class ExampleComponent {
  highlightedDates = (isoString: string) => {
    const date = new Date(isoString);
    const utcDay = date.getUTCDate();

    if (utcDay % 5 === 0) {
      return {
        textColor: '#800080',
        backgroundColor: '#ffc0cb',
        border: '1px solid #e91e63',
      };
    }

    if (utcDay % 3 === 0) {
      return {
        textColor: 'var(--ion-color-secondary)',
        backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
        border: '1px solid var(--ion-color-secondary-shade)',
      };
    }

    return undefined;
  };
}
```

**React**

```tsx
import React from 'react';
import { IonDatetime } from '@ionic/react';
function Example() {
  return (
    <IonDatetime
      presentation="date"
      highlightedDates={(isoString) => {
        const date = new Date(isoString);
        const utcDay = date.getUTCDate();

        if (utcDay % 5 === 0) {
          return {
            textColor: '#800080',
            backgroundColor: '#ffc0cb',
            border: '1px solid #e91e63',
          };
        }

        if (utcDay % 3 === 0) {
          return {
            textColor: 'var(--ion-color-secondary)',
            backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
            border: '1px solid var(--ion-color-secondary-shade)',
          };
        }

        return undefined;
      }}
    ></IonDatetime>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-datetime presentation="date" :highlighted-dates="highlightedDates"></ion-datetime>
</template>

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

  const highlightedDates = (isoString) => {
    const date = new Date(isoString);
    const utcDay = date.getUTCDate();

    if (utcDay % 5 === 0) {
      return {
        textColor: '#800080',
        backgroundColor: '#ffc0cb',
        border: '1px solid #e91e63',
      };
    }

    if (utcDay % 3 === 0) {
      return {
        textColor: 'var(--ion-color-secondary)',
        backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
        border: '1px solid var(--ion-color-secondary-shade)',
      };
    }

    return undefined;
  };
</script>
```

## Styling

### Global Theming

Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](/docs/theming/colors.md#new-color-creator) and the [Stepped Color Generator](/docs/theming/themes.md#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.

The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme.

**JavaScript**

`index.html`

```html
<ion-datetime color="rose"></ion-datetime>

<style>
  ion-datetime {
    --background: #fff1f2;
    --background-rgb: 255, 241, 242;

    border-radius: 16px;
    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
  }
</style>
```

`theme/variables.css`

```css
/* Ionic Variables and Theming
 * ---------------------------------------------------------------
 * Any overrides to theme variables should be placed in this file.
 * For more information, please see:
 * http://ionicframework.com/docs/theming/
 */

/* This sets the CSS variables for the rose color */
:root {
  --ion-color-rose: #831843;
  --ion-color-rose-rgb: 131, 24, 67;
  --ion-color-rose-contrast: #ffffff;
  --ion-color-rose-contrast-rgb: 255, 255, 255;
  --ion-color-rose-shade: #73153b;
  --ion-color-rose-tint: #8f2f56;
}

/* This overrides the global CSS variables for both modes */
:root.ios,
:root.md {
  --ion-background-color: #ffffff;
  --ion-background-color-rgb: 255, 255, 255;

  --ion-text-color: #881337;
  --ion-text-color-rgb: 136, 19, 55;

  --ion-text-color-step-50: #8e1e40;
  --ion-text-color-step-100: #94294a;
  --ion-text-color-step-150: #9a3453;
  --ion-text-color-step-200: #a03f5c;
  --ion-text-color-step-250: #a64b66;
  --ion-text-color-step-300: #ac566f;
  --ion-text-color-step-350: #b26178;
  --ion-text-color-step-400: #b86c82;
  --ion-text-color-step-450: #be778b;
  --ion-text-color-step-500: #c48295;
  --ion-text-color-step-550: #c98d9e;
  --ion-text-color-step-600: #cf98a7;
  --ion-text-color-step-650: #d5a3b1;
  --ion-text-color-step-700: #dbaeba;
  --ion-text-color-step-750: #e1bac3;
  --ion-text-color-step-800: #e7c5cd;
  --ion-text-color-step-850: #edd0d6;
  --ion-text-color-step-900: #f3dbdf;
  --ion-text-color-step-950: #f9e6e9;

  --ion-background-color-step-50: #f9e6e9;
  --ion-background-color-step-100: #f3dbdf;
  --ion-background-color-step-150: #edd0d6;
  --ion-background-color-step-200: #e7c5cd;
  --ion-background-color-step-250: #e1bac3;
  --ion-background-color-step-300: #dbaeba;
  --ion-background-color-step-350: #d5a3b1;
  --ion-background-color-step-400: #cf98a7;
  --ion-background-color-step-450: #c98d9e;
  --ion-background-color-step-500: #c48295;
  --ion-background-color-step-550: #be778b;
  --ion-background-color-step-600: #b86c82;
  --ion-background-color-step-650: #b26178;
  --ion-background-color-step-700: #ac566f;
  --ion-background-color-step-750: #a64b66;
  --ion-background-color-step-800: #a03f5c;
  --ion-background-color-step-850: #9a3453;
  --ion-background-color-step-900: #94294a;
  --ion-background-color-step-950: #8e1e40;
}

/* This adds the rose color */
.ion-color-rose {
  --ion-color-base: var(--ion-color-rose);
  --ion-color-base-rgb: var(--ion-color-rose-rgb);
  --ion-color-contrast: var(--ion-color-rose-contrast);
  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
  --ion-color-shade: var(--ion-color-rose-shade);
  --ion-color-tint: var(--ion-color-rose-tint);
}
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime color="rose"></ion-datetime>
```

`src/app/example.component.css`

```css
ion-datetime {
  --background: #fff1f2;
  --background-rgb: 255, 241, 242;

  border-radius: 16px;
  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
}
```

`src/app/example.component.ts`

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

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

`src/theme/variables.css`

```css
/* Ionic Variables and Theming
 * ---------------------------------------------------------------
 * Any overrides to theme variables should be placed in this file.
 * For more information, please see:
 * http://ionicframework.com/docs/theming/
 */

/* This sets the CSS variables for the rose color */
:root {
  --ion-color-rose: #831843;
  --ion-color-rose-rgb: 131, 24, 67;
  --ion-color-rose-contrast: #ffffff;
  --ion-color-rose-contrast-rgb: 255, 255, 255;
  --ion-color-rose-shade: #73153b;
  --ion-color-rose-tint: #8f2f56;
}

/* This overrides the global CSS variables for both modes */
:root.ios,
:root.md {
  --ion-background-color: #ffffff;
  --ion-background-color-rgb: 255, 255, 255;

  --ion-text-color: #881337;
  --ion-text-color-rgb: 136, 19, 55;

  --ion-text-color-step-50: #8e1e40;
  --ion-text-color-step-100: #94294a;
  --ion-text-color-step-150: #9a3453;
  --ion-text-color-step-200: #a03f5c;
  --ion-text-color-step-250: #a64b66;
  --ion-text-color-step-300: #ac566f;
  --ion-text-color-step-350: #b26178;
  --ion-text-color-step-400: #b86c82;
  --ion-text-color-step-450: #be778b;
  --ion-text-color-step-500: #c48295;
  --ion-text-color-step-550: #c98d9e;
  --ion-text-color-step-600: #cf98a7;
  --ion-text-color-step-650: #d5a3b1;
  --ion-text-color-step-700: #dbaeba;
  --ion-text-color-step-750: #e1bac3;
  --ion-text-color-step-800: #e7c5cd;
  --ion-text-color-step-850: #edd0d6;
  --ion-text-color-step-900: #f3dbdf;
  --ion-text-color-step-950: #f9e6e9;

  --ion-background-color-step-50: #f9e6e9;
  --ion-background-color-step-100: #f3dbdf;
  --ion-background-color-step-150: #edd0d6;
  --ion-background-color-step-200: #e7c5cd;
  --ion-background-color-step-250: #e1bac3;
  --ion-background-color-step-300: #dbaeba;
  --ion-background-color-step-350: #d5a3b1;
  --ion-background-color-step-400: #cf98a7;
  --ion-background-color-step-450: #c98d9e;
  --ion-background-color-step-500: #c48295;
  --ion-background-color-step-550: #be778b;
  --ion-background-color-step-600: #b86c82;
  --ion-background-color-step-650: #b26178;
  --ion-background-color-step-700: #ac566f;
  --ion-background-color-step-750: #a64b66;
  --ion-background-color-step-800: #a03f5c;
  --ion-background-color-step-850: #9a3453;
  --ion-background-color-step-900: #94294a;
  --ion-background-color-step-950: #8e1e40;
}

/* This adds the rose color */
.ion-color-rose {
  --ion-color-base: var(--ion-color-rose);
  --ion-color-base-rgb: var(--ion-color-rose-rgb);
  --ion-color-contrast: var(--ion-color-rose-contrast);
  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
  --ion-color-shade: var(--ion-color-rose-shade);
  --ion-color-tint: var(--ion-color-rose-tint);
}
```

**React**

`src/main.tsx`

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

import './main.css';

function Example() {
  return <IonDatetime color="rose"></IonDatetime>;
}
export default Example;
```

`src/main.css`

```css
ion-datetime {
  --background: #fff1f2;
  --background-rgb: 255, 241, 242;

  border-radius: 16px;
  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
}
```

`src/theme/variables.css`

```css
/* Ionic Variables and Theming
 * ---------------------------------------------------------------
 * Any overrides to theme variables should be placed in this file.
 * For more information, please see:
 * http://ionicframework.com/docs/theming/
 */

/* This sets the CSS variables for the rose color */
:root {
  --ion-color-rose: #831843;
  --ion-color-rose-rgb: 131, 24, 67;
  --ion-color-rose-contrast: #ffffff;
  --ion-color-rose-contrast-rgb: 255, 255, 255;
  --ion-color-rose-shade: #73153b;
  --ion-color-rose-tint: #8f2f56;
}

/* This overrides the global CSS variables for both modes */
:root.ios,
:root.md {
  --ion-background-color: #ffffff;
  --ion-background-color-rgb: 255, 255, 255;

  --ion-text-color: #881337;
  --ion-text-color-rgb: 136, 19, 55;

  --ion-text-color-step-50: #8e1e40;
  --ion-text-color-step-100: #94294a;
  --ion-text-color-step-150: #9a3453;
  --ion-text-color-step-200: #a03f5c;
  --ion-text-color-step-250: #a64b66;
  --ion-text-color-step-300: #ac566f;
  --ion-text-color-step-350: #b26178;
  --ion-text-color-step-400: #b86c82;
  --ion-text-color-step-450: #be778b;
  --ion-text-color-step-500: #c48295;
  --ion-text-color-step-550: #c98d9e;
  --ion-text-color-step-600: #cf98a7;
  --ion-text-color-step-650: #d5a3b1;
  --ion-text-color-step-700: #dbaeba;
  --ion-text-color-step-750: #e1bac3;
  --ion-text-color-step-800: #e7c5cd;
  --ion-text-color-step-850: #edd0d6;
  --ion-text-color-step-900: #f3dbdf;
  --ion-text-color-step-950: #f9e6e9;

  --ion-background-color-step-50: #f9e6e9;
  --ion-background-color-step-100: #f3dbdf;
  --ion-background-color-step-150: #edd0d6;
  --ion-background-color-step-200: #e7c5cd;
  --ion-background-color-step-250: #e1bac3;
  --ion-background-color-step-300: #dbaeba;
  --ion-background-color-step-350: #d5a3b1;
  --ion-background-color-step-400: #cf98a7;
  --ion-background-color-step-450: #c98d9e;
  --ion-background-color-step-500: #c48295;
  --ion-background-color-step-550: #be778b;
  --ion-background-color-step-600: #b86c82;
  --ion-background-color-step-650: #b26178;
  --ion-background-color-step-700: #ac566f;
  --ion-background-color-step-750: #a64b66;
  --ion-background-color-step-800: #a03f5c;
  --ion-background-color-step-850: #9a3453;
  --ion-background-color-step-900: #94294a;
  --ion-background-color-step-950: #8e1e40;
}

/* This adds the rose color */
.ion-color-rose {
  --ion-color-base: var(--ion-color-rose);
  --ion-color-base-rgb: var(--ion-color-rose-rgb);
  --ion-color-contrast: var(--ion-color-rose-contrast);
  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
  --ion-color-shade: var(--ion-color-rose-shade);
  --ion-color-tint: var(--ion-color-rose-tint);
}
```

**Vue**

`src/components/Example.vue`

```html
<template>
  <ion-datetime color="rose"></ion-datetime>
</template>

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

<style>
  ion-datetime {
    --background: #fff1f2;
    --background-rgb: 255, 241, 242;

    border-radius: 16px;
    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
  }
</style>
```

`src/theme/variables.css`

```css
/* Ionic Variables and Theming
 * ---------------------------------------------------------------
 * Any overrides to theme variables should be placed in this file.
 * For more information, please see:
 * http://ionicframework.com/docs/theming/
 */

/* This sets the CSS variables for the rose color */
:root {
  --ion-color-rose: #831843;
  --ion-color-rose-rgb: 131, 24, 67;
  --ion-color-rose-contrast: #ffffff;
  --ion-color-rose-contrast-rgb: 255, 255, 255;
  --ion-color-rose-shade: #73153b;
  --ion-color-rose-tint: #8f2f56;
}

/* This overrides the global CSS variables for both modes */
:root.ios,
:root.md {
  --ion-background-color: #ffffff;
  --ion-background-color-rgb: 255, 255, 255;

  --ion-text-color: #881337;
  --ion-text-color-rgb: 136, 19, 55;

  --ion-text-color-step-50: #8e1e40;
  --ion-text-color-step-100: #94294a;
  --ion-text-color-step-150: #9a3453;
  --ion-text-color-step-200: #a03f5c;
  --ion-text-color-step-250: #a64b66;
  --ion-text-color-step-300: #ac566f;
  --ion-text-color-step-350: #b26178;
  --ion-text-color-step-400: #b86c82;
  --ion-text-color-step-450: #be778b;
  --ion-text-color-step-500: #c48295;
  --ion-text-color-step-550: #c98d9e;
  --ion-text-color-step-600: #cf98a7;
  --ion-text-color-step-650: #d5a3b1;
  --ion-text-color-step-700: #dbaeba;
  --ion-text-color-step-750: #e1bac3;
  --ion-text-color-step-800: #e7c5cd;
  --ion-text-color-step-850: #edd0d6;
  --ion-text-color-step-900: #f3dbdf;
  --ion-text-color-step-950: #f9e6e9;

  --ion-background-color-step-50: #f9e6e9;
  --ion-background-color-step-100: #f3dbdf;
  --ion-background-color-step-150: #edd0d6;
  --ion-background-color-step-200: #e7c5cd;
  --ion-background-color-step-250: #e1bac3;
  --ion-background-color-step-300: #dbaeba;
  --ion-background-color-step-350: #d5a3b1;
  --ion-background-color-step-400: #cf98a7;
  --ion-background-color-step-450: #c98d9e;
  --ion-background-color-step-500: #c48295;
  --ion-background-color-step-550: #be778b;
  --ion-background-color-step-600: #b86c82;
  --ion-background-color-step-650: #b26178;
  --ion-background-color-step-700: #ac566f;
  --ion-background-color-step-750: #a64b66;
  --ion-background-color-step-800: #a03f5c;
  --ion-background-color-step-850: #9a3453;
  --ion-background-color-step-900: #94294a;
  --ion-background-color-step-950: #8e1e40;
}

/* This adds the rose color */
.ion-color-rose {
  --ion-color-base: var(--ion-color-rose);
  --ion-color-base-rgb: var(--ion-color-rose-rgb);
  --ion-color-contrast: var(--ion-color-rose-contrast);
  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
  --ion-color-shade: var(--ion-color-rose-shade);
  --ion-color-tint: var(--ion-color-rose-tint);
}
```

### Datetime Header

The datetime header manages the content for the `title` slot and the selected date.

**Note**

The selected date will not render if `preferWheel` is set to `true`.

**JavaScript**

```html
<ion-datetime presentation="date">
  <span slot="title">Select Date</span>
</ion-datetime>

<style>
  /*
   * Custom Datetime Header Parts
   * -------------------------------------------
   */
  ion-datetime::part(datetime-header) {
    background-color: orange;
  }

  ion-datetime::part(datetime-title) {
    background-color: pink;
  }

  ion-datetime::part(datetime-selected-date) {
    background-color: violet;
  }
</style>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date">
  <span slot="title">Select Date</span>
</ion-datetime>
```

`src/app/example.component.css`

```css
/*
 * Custom Datetime Header Parts
 * -------------------------------------------
 */
ion-datetime::part(datetime-header) {
  background-color: orange;
}

ion-datetime::part(datetime-title) {
  background-color: pink;
}

ion-datetime::part(datetime-selected-date) {
  background-color: violet;
}
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonDatetime } from '@ionic/angular/standalone';

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

**React**

`src/main.tsx`

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

import './main.css';

function Example() {
  return (
    <>
      <IonDatetime presentation="date">
        <span slot="title">Select Date</span>
      </IonDatetime>
    </>
  );
}
export default Example;
```

`src/main.css`

```css
/*
 * Custom Datetime Header Parts
 * -------------------------------------------
 */
ion-datetime::part(datetime-header) {
  background-color: orange;
}

ion-datetime::part(datetime-title) {
  background-color: pink;
}

ion-datetime::part(datetime-selected-date) {
  background-color: violet;
}
```

**Vue**

```html
<template>
  <ion-datetime presentation="date">
    <span slot="title">Select Date</span>
  </ion-datetime>
</template>

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

<style scoped>
  /*
   * Custom Datetime Header Parts
   * -------------------------------------------
   */

  ion-datetime::part(datetime-header) {
    background-color: orange;
  }

  ion-datetime::part(datetime-title) {
    background-color: pink;
  }

  ion-datetime::part(datetime-selected-date) {
    background-color: violet;
  }
</style>
```

### Calendar Header

The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.

The header can be styled using CSS shadow parts.

**JavaScript**

```html
<ion-datetime presentation="date"></ion-datetime>

<style>
  /*
   * Custom Datetime Calendar Header Parts
   * -------------------------------------------
   */
  ion-datetime::part(calendar-header) {
    background-color: orange;
  }

  ion-datetime::part(month-year-button) {
    background-color: lightblue;
  }

  ion-datetime::part(navigation-button) {
    background-color: firebrick;
  }

  ion-datetime::part(previous-button) {
    color: white;
  }

  ion-datetime::part(next-button) {
    color: black;
  }

  ion-datetime::part(calendar-days-of-week) {
    background-color: #9ad162;
    color: white;
  }
</style>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date"></ion-datetime>
```

`src/app/example.component.css`

```css
/*
 * Custom Datetime Calendar Header Parts
 * -------------------------------------------
 */
ion-datetime::part(calendar-header) {
  background-color: orange;
}

ion-datetime::part(month-year-button) {
  background-color: lightblue;
}

ion-datetime::part(navigation-button) {
  background-color: firebrick;
}

ion-datetime::part(previous-button) {
  color: white;
}

ion-datetime::part(next-button) {
  color: black;
}

ion-datetime::part(calendar-days-of-week) {
  background-color: #9ad162;
  color: white;
}
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonDatetime } from '@ionic/angular/standalone';

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

**React**

`src/main.tsx`

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

import './main.css';

function Example() {
  return (
    <>
      <IonDatetime presentation="date"></IonDatetime>
    </>
  );
}
export default Example;
```

`src/main.css`

```css
/*
 * Custom Datetime Calendar Header Parts
 * -------------------------------------------
 */
ion-datetime::part(calendar-header) {
  background-color: orange;
}

ion-datetime::part(month-year-button) {
  background-color: lightblue;
}

ion-datetime::part(navigation-button) {
  background-color: firebrick;
}

ion-datetime::part(previous-button) {
  color: white;
}

ion-datetime::part(next-button) {
  color: black;
}

ion-datetime::part(calendar-days-of-week) {
  background-color: #9ad162;
  color: white;
}
```

**Vue**

```html
<template>
  <ion-datetime presentation="date"></ion-datetime>
</template>

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

<style scoped>
  /*
   * Custom Datetime Calendar Header Part
   * -------------------------------------------
   */
  ion-datetime::part(calendar-header) {
    background-color: orange;
  }

  ion-datetime::part(month-year-button) {
    background-color: lightblue;
  }

  ion-datetime::part(navigation-button) {
    background-color: firebrick;
  }

  ion-datetime::part(previous-button) {
    color: white;
  }

  ion-datetime::part(next-button) {
    color: black;
  }

  ion-datetime::part(calendar-days-of-week) {
    background-color: #9ad162;
    color: white;
  }
</style>
```

### Calendar Days

The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts.

**Note**

The example below selects the day 2 days ago, unless that day is in the previous month, then it selects a day 2 days in the future. This is done for demo purposes in order to show how to apply custom styling to all days, the current day, and the selected day.

**JavaScript**

```html
<ion-datetime presentation="date"></ion-datetime>

<script>
  const datetime = document.querySelector('ion-datetime');

  const date = new Date();

  // Set the value of the datetime to 2 days
  // before the current day
  let dayChange = -2;

  // If the day we are going to set the value to
  // is in the previous month then set the day 2 days
  // later instead so it remains in the same month
  if (date.getDate() + dayChange <= 0) {
    dayChange = -dayChange;
  }

  // Set the value of the datetime to the day
  // calculated above
  date.setDate(date.getDate() + dayChange);
  datetime.value = date.toISOString();
</script>

<style>
  /*
  * Custom Datetime Day Parts
  * -------------------------------------------
  */

  ion-datetime::part(calendar-day) {
    color: #da5296;
  }

  ion-datetime::part(calendar-day today) {
    color: #8462d1;
  }

  ion-datetime::part(calendar-day):focus {
    background-color: rgb(154 209 98 / 0.2);
    box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
  }

  /*
  * Custom Material Design Datetime Day Parts
  * -------------------------------------------
  */

  ion-datetime.md::part(calendar-day active),
  ion-datetime.md::part(calendar-day active):focus {
    background-color: #9ad162;
    border-color: #9ad162;
    color: #fff;
  }

  ion-datetime.md::part(calendar-day today) {
    border-color: #8462d1;
  }

  /*
  * Custom iOS Datetime Day Parts
  * -------------------------------------------
  */

  ion-datetime.ios::part(calendar-day active),
  ion-datetime.ios::part(calendar-day active):focus {
    background-color: rgb(154 209 98 / 0.2);
    color: #9ad162;
  }
</style>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date" [(ngModel)]="datetime"></ion-datetime>
```

`src/app/example.component.css`

```css
/*
* Custom Datetime Day Parts
* -------------------------------------------
*/

ion-datetime::part(calendar-day) {
  color: #da5296;
}

ion-datetime::part(calendar-day today) {
  color: #8462d1;
}

ion-datetime::part(calendar-day):focus {
  background-color: rgb(154 209 98 / 0.2);
  box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
}

/*
* Custom Material Design Datetime Day Parts
* -------------------------------------------
*/

ion-datetime.md::part(calendar-day active),
ion-datetime.md::part(calendar-day active):focus {
  background-color: #9ad162;
  border-color: #9ad162;
  color: #fff;
}

ion-datetime.md::part(calendar-day today) {
  border-color: #8462d1;
}

/*
* Custom iOS Datetime Day Parts
* -------------------------------------------
*/

ion-datetime.ios::part(calendar-day active),
ion-datetime.ios::part(calendar-day active):focus {
  background-color: rgb(154 209 98 / 0.2);
  color: #9ad162;
}
```

`src/app/example.component.ts`

```ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { IonDatetime } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

// ViewEncapsulation is turned off for this demo due to
// a lack of support for styling multiple css shadow parts
// See https://github.com/angular/angular/issues/22515
@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation: ViewEncapsulation.None,
  imports: [IonDatetime, FormsModule],
})
export class ExampleComponent implements OnInit {
  public datetime!: string;

  ngOnInit() {
    const date = new Date();

    // Set the value of the datetime to 2 days
    // before the current day
    let dayChange = -2;

    // If the day we are going to set the value to
    // is in the previous month then set the day 2 days
    // later instead so it remains in the same month
    if (date.getDate() + dayChange <= 0) {
      dayChange = -dayChange;
    }

    // Set the value of the datetime to the day
    // calculated above
    date.setDate(date.getDate() + dayChange);
    this.datetime = date.toISOString();
  }
}
```

**React**

`src/main.tsx`

```tsx
import React, { useEffect, useState } from 'react';
import { IonDatetime } from '@ionic/react';

import './main.css';

function Example() {
  const [datetime, setDatetime] = useState<string | null>(null);

  useEffect(() => {
    const date = new Date();

    // Set the value of the datetime to 2 days
    // before the current day
    let dayChange = -2;

    // If the day we are going to set the value to
    // is in the previous month then set the day 2 days
    // later instead so it remains in the same month
    if (date.getDate() + dayChange <= 0) {
      dayChange = -dayChange;
    }

    // Set the value of the datetime to the day
    // calculated above
    date.setDate(date.getDate() + dayChange);
    setDatetime(date.toISOString());
  }, []);

  return <IonDatetime presentation="date" value={datetime}></IonDatetime>;
}
export default Example;
```

`src/main.css`

```css
/*
* Custom Datetime Day Parts
* -------------------------------------------
*/

ion-datetime::part(calendar-day) {
  color: #da5296;
}

ion-datetime::part(calendar-day today) {
  color: #8462d1;
}

ion-datetime::part(calendar-day):focus {
  background-color: rgb(154 209 98 / 0.2);
  box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
}

/*
* Custom Material Design Datetime Day Parts
* -------------------------------------------
*/

ion-datetime.md::part(calendar-day active),
ion-datetime.md::part(calendar-day active):focus {
  background-color: #9ad162;
  border-color: #9ad162;
  color: #fff;
}

ion-datetime.md::part(calendar-day today) {
  border-color: #8462d1;
}

/*
* Custom iOS Datetime Day Parts
* -------------------------------------------
*/

ion-datetime.ios::part(calendar-day active),
ion-datetime.ios::part(calendar-day active):focus {
  background-color: rgb(154 209 98 / 0.2);
  color: #9ad162;
}
```

**Vue**

```html
<template>
  <ion-datetime presentation="date" :value="datetime"></ion-datetime>
</template>

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

  let datetime = ref('');

  const date = new Date();

  // Set the value of the datetime to 2 days
  // before the current day
  let dayChange = -2;

  // If the day we are going to set the value to
  // is in the previous month then set the day 2 days
  // later instead so it remains in the same month
  if (date.getDate() + dayChange <= 0) {
    dayChange = -dayChange;
  }

  // Set the value of the datetime to the day
  // calculated above
  date.setDate(date.getDate() + dayChange);
  datetime = date.toISOString();
</script>

<style scoped>
  /*
  * Custom Datetime Day Parts
  * -------------------------------------------
  */

  ion-datetime::part(calendar-day) {
    color: #da5296;
  }

  ion-datetime::part(calendar-day today) {
    color: #8462d1;
  }

  ion-datetime::part(calendar-day):focus {
    background-color: rgb(154 209 98 / 0.2);
    box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
  }

  /*
  * Custom Material Design Datetime Day Parts
  * -------------------------------------------
  */

  ion-datetime.md::part(calendar-day active),
  ion-datetime.md::part(calendar-day active):focus {
    background-color: #9ad162;
    border-color: #9ad162;
    color: #fff;
  }

  ion-datetime.md::part(calendar-day today) {
    border-color: #8462d1;
  }

  /*
  * Custom iOS Datetime Day Parts
  * -------------------------------------------
  */

  ion-datetime.ios::part(calendar-day active),
  ion-datetime.ios::part(calendar-day active):focus {
    background-color: rgb(154 209 98 / 0.2);
    color: #9ad162;
  }
</style>
```

### Wheel Pickers

The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes.

**JavaScript**

```html
<style>
  ion-datetime {
    --background: rgb(245, 235, 247);
    --background-rgb: 245, 235, 247;
    --wheel-highlight-background: rgb(218, 216, 255);
    --wheel-highlight-border-radius: 48px;
    --wheel-fade-background-rgb: 245, 235, 247;
  }

  ion-datetime::part(wheel):focus {
    background: rgb(109, 208, 164);
  }

  ion-datetime::part(wheel-item) {
    color: rgb(255, 66, 97);
  }

  ion-datetime::part(wheel-item active) {
    color: rgb(128, 30, 171);
  }
</style>

<ion-datetime presentation="date" prefer-wheel="true"></ion-datetime>
```

**Angular**

`src/app/example.component.html`

```html
<ion-datetime presentation="date" [preferWheel]="true"></ion-datetime>
```

`src/app/example.component.css`

```css
ion-datetime {
  --background: rgb(245, 235, 247);
  --background-rgb: 245, 235, 247;
  --wheel-highlight-background: rgb(218, 216, 255);
  --wheel-highlight-border-radius: 48px;
  --wheel-fade-background-rgb: 245, 235, 247;
}

ion-datetime::part(wheel):focus {
  background: rgb(109, 208, 164);
}

ion-datetime::part(wheel-item) {
  color: rgb(255, 66, 97);
}

ion-datetime::part(wheel-item active) {
  color: rgb(128, 30, 171);
}
```

`src/app/example.component.ts`

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

// ViewEncapsulation is turned off for this demo due to
// a lack of support for styling multiple css shadow parts
// See https://github.com/angular/angular/issues/22515
@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation: ViewEncapsulation.None,
  imports: [IonDatetime],
})
export class ExampleComponent {}
```

**React**

`src/main.tsx`

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

import './main.css';

function Example() {
  return <IonDatetime presentation="date" preferWheel={true}></IonDatetime>;
}
export default Example;
```

`src/main.css`

```css
ion-datetime {
  --background: rgb(245, 235, 247);
  --background-rgb: 245, 235, 247;
  --wheel-highlight-background: rgb(218, 216, 255);
  --wheel-highlight-border-radius: 48px;
  --wheel-fade-background-rgb: 245, 235, 247;
}

ion-datetime::part(wheel):focus {
  background: rgb(109, 208, 164);
}

ion-datetime::part(wheel-item) {
  color: rgb(255, 66, 97);
}

ion-datetime::part(wheel-item active) {
  color: rgb(128, 30, 171);
}
```

**Vue**

```html
<template>
  <ion-datetime presentation="date" :prefer-wheel="true"></ion-datetime>
</template>

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

<style scoped>
  ion-datetime {
    --background: rgb(245, 235, 247);
    --background-rgb: 245, 235, 247;
    --wheel-highlight-background: rgb(218, 216, 255);
    --wheel-highlight-border-radius: 48px;
    --wheel-fade-background-rgb: 245, 235, 247;
  }

  ion-datetime::part(wheel):focus {
    background: rgb(109, 208, 164);
  }

  ion-datetime::part(wheel-item) {
    color: rgb(255, 66, 97);
  }

  ion-datetime::part(wheel-item active) {
    color: rgb(128, 30, 171);
  }
</style>
```

## Time Zones

Ionic's `ion-datetime` follows the [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) behavior of not manipulating or setting the time zone inside of a datetime control. In other words, a time value of "07:00" will not be adjusted according to different time zones.

We recommend using a library such as [date-fns-tz](https://github.com/marnusw/date-fns-tz) to convert a datetime value to the desired time zone.

Below is an example of formatting an ISO-8601 string to display in the time zone set on a user's device:

```typescript
import { format, utcToZonedTime } from 'date-fns-tz';

// Get the time zone set on the user's device
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

// Create a date object from a UTC date string
const date = new Date('2014-10-25T10:46:20Z');

// Use date-fns-tz to convert from UTC to a zoned time
const zonedTime = utcToZonedTime(date, userTimeZone);

// Create a formatted string from the zoned time
format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
```

### Parsing Date Values

The `ionChange` event will emit the date value as an ISO-8601 string in the event payload. It is the developer's responsibility to format it based on their application needs. We recommend using [date-fns](https://date-fns.org) to format the date value.

Below is an example of formatting an ISO-8601 string to display the month, date and year:

```typescript
import { format, parseISO } from 'date-fns';

/**
 * This is provided in the event
 * payload from the `ionChange` event.
 *
 * The value is an ISO-8601 date string.
 */
const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');

console.log(formattedString); // Jun 4, 2021
```

See [https://date-fns.org/docs/format](https://date-fns.org/docs/format) for a list of all the valid format tokens.

## Advanced Datetime Validation and Manipulation

The datetime picker provides the simplicity of selecting an exact format, and persists the datetime values as a string using the standardized [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime). However, it's important to note that `ion-datetime` does not attempt to solve all situations when validating and manipulating datetime values. If datetime values need to be parsed from a certain format, or manipulated (such as adding 5 days to a date, subtracting 30 minutes, etc.), or even formatting data to a specific locale, then we highly recommend using [date-fns](https://date-fns.org) to work with dates in JavaScript.

## Accessibility

### Keyboard Interactions

`ion-datetime` has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does:

| Key | Description |
| --- | --- |
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves focus to the previous focusable element. |
| Space or Enter | Clicks the focusable element. |

#### Date Grid

| Key | Description |
| --- | --- |
| ArrowUp | Moves focus to the same day of the previous week. |
| ArrowDown | Moves focus to the same day of the next week. |
| ArrowRight | Moves focus to the next day. |
| ArrowLeft | Moves focus to the previous day. |
| Home | Moves focus to the first day of the current week. |
| End | Moves focus to the last day of the current week. |
| PageUp | Changes the grid of dates to the previous month. |
| PageDown | Changes the grid of dates to the next month. |
| Shift + PageUp | Changes the grid of dates to the previous year. |
| Shift + PageDown | Changes the grid of dates to the next year. |

#### Time, Month, and Year Wheels

The wheel picker in Datetime uses [Picker](/docs/api/picker.md) internally. Refer to [Picker Accessibility](/docs/api/picker.md#accessibility) for more information on accessibility features with the wheel picker.

## Interfaces

### DatetimeChangeEventDetail

```typescript
interface DatetimeChangeEventDetail {
  value?: string | null;
}
```

### DatetimeCustomEvent

While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.

```typescript
interface DatetimeCustomEvent extends CustomEvent {
  detail: DatetimeChangeEventDetail;
  target: HTMLIonDatetimeElement;
}
```

## Properties

### cancelText

**Description**: The text to display on the picker's cancel button.

**Attribute**: `cancel-text`

**Type**: `string`

**Default**: `'Cancel'`

### clearText

**Description**: The text to display on the picker's "Clear" button.

**Attribute**: `clear-text`

**Type**: `string`

**Default**: `'Clear'`

### 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, refer to [theming](/docs/theming/basics.md).

**Attribute**: `color`

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

**Default**: `undefined`

### dayValues

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

**Attribute**: `day-values`

**Type**: `number | number[] | string | undefined`

**Default**: `undefined`

### disabled

**Description**: If `true`, the user cannot interact with the datetime.

**Attribute**: `disabled`

**Type**: `boolean`

**Default**: `false`

### doneText

**Description**: The text to display on the picker's "Done" button.

**Attribute**: `done-text`

**Type**: `string`

**Default**: `'Done'`

### firstDayOfWeek

**Description**: The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.

**Attribute**: `first-day-of-week`

**Type**: `number`

**Default**: `0`

### formatOptions

**Description**: Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).

**Attribute**: `undefined`

**Type**: `undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; }`

**Default**: `undefined`

### highlightedDates

**Description**: 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"`.

**Attribute**: `undefined`

**Type**: `((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined`

**Default**: `undefined`

### hourCycle

**Description**: The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.

**Attribute**: `hour-cycle`

**Type**: `"h11" | "h12" | "h23" | "h24" | undefined`

**Default**: `undefined`

### hourValues

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

**Attribute**: `hour-values`

**Type**: `number | number[] | string | undefined`

**Default**: `undefined`

### isDateEnabled

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

**Attribute**: `undefined`

**Type**: `((dateIsoString: string) => boolean) | undefined`

**Default**: `undefined`

### locale

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

**Attribute**: `locale`

**Type**: `string`

**Default**: `'default'`

### max

**Description**: The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `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.

**Attribute**: `max`

**Type**: `string | undefined`

**Default**: `undefined`

### min

**Description**: The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), 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](/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**: `min`

**Type**: `string | undefined`

**Default**: `undefined`

### minuteValues

**Description**: 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"`.

**Attribute**: `minute-values`

**Type**: `number | number[] | string | undefined`

**Default**: `undefined`

### 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`

### monthValues

**Description**: 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`.

**Attribute**: `month-values`

**Type**: `number | number[] | string | undefined`

**Default**: `undefined`

### multiple

**Description**: If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.

**Attribute**: `multiple`

**Type**: `boolean`

**Default**: `false`

### name

**Description**: The name of the control, which is submitted with the form data.

**Attribute**: `name`

**Type**: `string`

**Default**: `this.inputId`

### preferWheel

**Description**: 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"`.

**Attribute**: `prefer-wheel`

**Type**: `boolean`

**Default**: `false`

### presentation

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

**Attribute**: `presentation`

**Type**: `"date" | "date-time" | "month" | "month-year" | "time" | "time-date" | "year"`

**Default**: `'date-time'`

### readonly

**Description**: If `true`, the datetime appears normal but the selected date cannot be changed.

**Attribute**: `readonly`

**Type**: `boolean`

**Default**: `false`

### showAdjacentDays

**Description**: If `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.

**Attribute**: `show-adjacent-days`

**Type**: `boolean`

**Default**: `false`

### showClearButton

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

**Attribute**: `show-clear-button`

**Type**: `boolean`

**Default**: `false`

### showDefaultButtons

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

**Attribute**: `show-default-buttons`

**Type**: `boolean`

**Default**: `false`

### showDefaultTimeLabel

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

**Attribute**: `show-default-time-label`

**Type**: `boolean`

**Default**: `true`

### showDefaultTitle

**Description**: If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.

**Attribute**: `show-default-title`

**Type**: `boolean`

**Default**: `false`

### size

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

**Attribute**: `size`

**Type**: `"cover" | "fixed"`

**Default**: `'fixed'`

### titleSelectedDatesFormatter

**Description**: 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](https://ionicframework.com/docs/troubleshooting/runtime#accessing-this) if you need to access `this` from within the callback.

**Attribute**: `undefined`

**Type**: `((selectedDates: string[]) => string) | undefined`

**Default**: `undefined`

### value

**Description**: The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.

**Attribute**: `value`

**Type**: `null | string | string[] | undefined`

**Default**: `undefined`

### yearValues

**Description**: 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"`.

**Attribute**: `year-values`

**Type**: `number | number[] | string | undefined`

**Default**: `undefined`

## Events

| Name | Description | Bubbles |
| --- | --- | --- |
| `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. This event will not emit when programmatically setting the `value` property. | `true` |
| `ionFocus` | Emitted when the datetime has focus. | `true` |

## Methods

### cancel

**Description**: Emits the ionCancel event, discards any unconfirmed selection, and optionally closes the popover or modal that the datetime was presented in.

**Signature**: `cancel(closeOverlay?: boolean) => Promise<void>`

**Parameters**: **closeOverlay**: If `true`, closes the parent overlay. Defaults to `false`.

### confirm

**Description**: Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.

**Signature**: `confirm(closeOverlay?: boolean) => Promise<void>`

**Parameters**: **closeOverlay**: If `true`, closes the parent overlay. Defaults to `false`.

### reset

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

**Signature**: `reset(startDate?: string) => Promise<void>`

**Parameters**: **startDate**: A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.

## CSS Shadow Parts

| Name | Description |
| --- | --- |
| `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. |
| `calendar-days-of-week` | The container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout. |
| `calendar-header` | The 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-header` | The datetime header contains the content for the `title` slot and the selected date. |
| `datetime-selected-date` | The element that contains the selected date. |
| `datetime-title` | The element that contains the `title` slot content. |
| `month-year-button` | The button that opens the month/year picker when using a grid style layout. |
| `navigation-button` | The buttons used to navigate to the next or previous month when using a grid style layout. |
| `next-button` | The button used to navigate to the next month when using a grid style layout. |
| `previous-button` | The button used to navigate to the previous month 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` | The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout. |
| `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 Custom Properties

**iOS**

| Name | Description |
| --- | --- |
| `--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. |
| `--wheel-highlight-border-radius` | The 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. |

**MD**

| Name | Description |
| --- | --- |
| `--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. |
| `--wheel-highlight-border-radius` | The 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. |

## Slots

| Name | Description |
| --- | --- |
| `buttons` | The buttons in the datetime. |
| `time-label` | The label for the time selector in the datetime. |
| `title` | The title of the datetime. |