Skip to content

docs(datetime, datetime-button): document formatOptions property #3452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 15, 2024
Merged

docs(datetime, datetime-button): document formatOptions property #3452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f74ec55
docs(datetime,datetime-button): document formatOptions property
mapsandapps Feb 14, 2024
9ab2baa
misc improvements
mapsandapps Feb 14, 2024
0d40670
Apply suggestions from code review
mapsandapps Feb 15, 2024
3458632
add link to time zone docs
mapsandapps Feb 15, 2024
100cec6
enlarge playground
mapsandapps Feb 15, 2024
7a8b2ef
Merge branch 'FW-5860' of github.com:ionic-team/ionic-docs into FW-5860
mapsandapps Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/api/datetime-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ import Basic from '@site/static/usage/v7/datetime-button/basic/index.md';

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

## Format Options

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

import FormatOptions from '@site/static/usage/v7/datetime-button/format-options/index.md';

<FormatOptions />

## Usage with Modals and Popovers

`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used.
Expand Down
12 changes: 12 additions & 0 deletions docs/api/datetime.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import MaxMin from '@site/static/usage/v7/datetime/date-constraints/max-min/inde
import Values from '@site/static/usage/v7/datetime/date-constraints/values/index.md';
import Advanced from '@site/static/usage/v7/datetime/date-constraints/advanced/index.md';

import FormatOptions from '@site/static/usage/v7/datetime/format-options/index.md';

import CustomLocale from '@site/static/usage/v7/datetime/localization/custom-locale/index.md';
import HourCycle from '@site/static/usage/v7/datetime/localization/hour-cycle/index.md';
import FirstDayOfWeek from '@site/static/usage/v7/datetime/localization/first-day-of-week/index.md';
Expand Down Expand Up @@ -268,6 +270,16 @@ By default, `ion-datetime` does not show any header or title associated with the

<CustomizingTitle />

## 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional: I could be totally wrong, but I feel like most of the time using either dateStyle or timeStyle will be what most devs want here since it lets you quickly do things like 02/15/2024. Perhaps we can make that suggestion? I'm fine not doing this if you think it would be more confusing than helpful.


<FormatOptions />

## 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.
Expand Down
24 changes: 24 additions & 0 deletions static/usage/v7/datetime-button/format-options/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
```html
<ion-datetime-button datetime="datetime"></ion-datetime-button>

<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime
id="datetime"
presentation="date-time"
value="2023-11-02T01:22:00"
[formatOptions]="{
date: {
weekday: 'short',
month: 'long',
day: '2-digit',
},
time: {
hour: '2-digit',
minute: '2-digit',
},
}"
></ion-datetime>
</ng-template>
</ion-modal>
```
41 changes: 41 additions & 0 deletions static/usage/v7/datetime-button/format-options/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Datetime Button</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-datetime-button datetime="datetime"></ion-datetime-button>

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

<script>
const datetime = document.querySelector('ion-datetime');
datetime.formatOptions = {
date: {
weekday: 'short',
month: 'long',
day: '2-digit',
},
time: {
hour: '2-digit',
minute: '2-digit',
},
};
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions static/usage/v7/datetime-button/format-options/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

<Playground
version="7"
size="large"
code={{
javascript,
react,
vue,
angular,
}}
src="usage/v7/datetime-button/format-options/demo.html"
/>
22 changes: 22 additions & 0 deletions static/usage/v7/datetime-button/format-options/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
```html
<ion-datetime-button datetime="datetime"></ion-datetime-button>

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

<script>
const datetime = document.querySelector('ion-datetime');
datetime.formatOptions = {
date: {
weekday: 'short',
month: 'long',
day: '2-digit',
},
time: {
hour: '2-digit',
minute: '2-digit',
},
};
</script>
```
32 changes: 32 additions & 0 deletions static/usage/v7/datetime-button/format-options/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
```tsx
import React from 'react';
import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';

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

<IonModal keepContentsMounted={true}>
<IonDatetime
id="datetime"
presentation="date-time"
value="2023-11-02T01:22:00"
formatOptions={{
date: {
weekday: 'short',
month: 'long',
day: '2-digit',
},
time: {
hour: '2-digit',
minute: '2-digit',
},
}}
></IonDatetime>
</IonModal>
</>
);
}
export default Example;
```
31 changes: 31 additions & 0 deletions static/usage/v7/datetime-button/format-options/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
```html
<template>
<ion-datetime-button datetime="datetime"></ion-datetime-button>

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

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

const formatOptions = {
date: {
weekday: 'short',
month: 'long',
day: '2-digit',
},
time: {
hour: '2-digit',
minute: '2-digit',
},
};
</script>
```
11 changes: 11 additions & 0 deletions static/usage/v7/datetime/format-options/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
```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>
```
37 changes: 37 additions & 0 deletions static/usage/v7/datetime/format-options/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Datetime</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
<style>
ion-datetime {
width: 350px;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-datetime value="2023-11-02T01:22:00">
<span slot="title">Select Date</span>
</ion-datetime>
</div>
</ion-content>
</ion-app>

<script>
const datetime = document.querySelector('ion-datetime');
datetime.formatOptions = {
time: { hour: '2-digit', minute: '2-digit' },
date: { day: '2-digit', month: 'long' },
};
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions static/usage/v7/datetime/format-options/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

<Playground
version="7"
size="large"
code={{
javascript,
react,
vue,
angular,
}}
src="usage/v7/datetime/format-options/demo.html"
/>
13 changes: 13 additions & 0 deletions static/usage/v7/datetime/format-options/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
```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>
```
19 changes: 19 additions & 0 deletions static/usage/v7/datetime/format-options/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
```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;
```
17 changes: 17 additions & 0 deletions static/usage/v7/datetime/format-options/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```html
<template>
<ion-datetime value="2023-11-02T01:22:00" :format-options="formatOptions">
<span slot="title">Select Date</span>
</ion-datetime>
</template>

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

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