javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(datetime): example formatting date values in ISO-8601 (#24686)

Browse Source
This commit is contained in:
Sean Perkins
2022-02-02 15:12:51 -05:00
committed by GitHub
parent 928c5fbfcb
commit b0c9f097d2
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
core/src/components/datetime/readme.md
View File

@ -147,11 +147,27 @@ const zonedTime = dateFnsTz.utcToZonedTime(date, userTimeZone);
format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone }); format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
``` ```
## Parsing Dates ## Timezones
When `ionChange` is emitted, we provide an ISO-8601 string in the event payload. From there, it is the developer's responsibility to format it as they see fit. We recommend using a library like [date-fns](https://date-fns.org) to format their dates properly. ### Assigning Date Values
Below is an example of formatting an ISO-8601 string to display the month, date, and year: `ion-datetime` does not manipulate or read timezones. Developers will need to pass in a valid ISO-8601 string that is already configured for the user's timezone when assigning a value. If no value is provided, `ion-datetime` will default to the time specified on the user's machine (which will already be in the user's timezone). We recommend using [date-fns](https://date-fns.org) to format the date to ISO-8601.
```typescript
import { formatISO } from 'date-fns';
const dateString = '2021-01-14T15:00:00.000Z';
const formattedDateValue = formatISO(new Date(dateString));
// Assign `formattedDateValue` to your `ion-datetime` value.
```
### 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 ```typescript
import { format, parseISO } from 'date-fns'; import { format, parseISO } from 'date-fns';
@ -159,6 +175,8 @@ import { format, parseISO } from 'date-fns';
/** /**
* This is provided in the event * This is provided in the event
* payload from the `ionChange` event. * payload from the `ionChange` event.
*
* The value is an ISO-8601 date string.
*/ */
const dateFromIonDatetime = '2021-06-04T14:23:00-04:00'; const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy'); const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');