Netlify CMS Widget DateTimeZone

 

This widget provides the datetimezone widget to store date, time, and timezone data for working with dates and times internationally. It was developed for conference.jamfire.io and was designed to use with Luxon.

Install

Add the package to your project.

``bash
yarn add netlify-cms-widget-datetimezone
`

Configure Netlify CMS to use the widget.

`js
// import libs
import CMS, { init } from "netlify-cms-app";
import {
DateTimeZoneControl,
DateTimeZonePreview,
} from "netlify-cms-widget-datetimezone";

// register datetimezone widget
CMS.registerWidget("datetimezone", DateTimeZoneControl, DateTimeZonePreview);
`

Add the widget to a field.

`yaml
fields:
- { name: "datetimezone", label: "Start Time", widget: "datetimezone" }
`

Example Component

`js
// import libs
import React from 'react';
import { DateTime } from "luxon";

/**
* DateComponent
* @param {string} datetime
* @param {string} timezone
* @param {string} locale
*/
const DateComponent = ({ datetime, timezone, locale }) => {

// get the entry datetime and timezone
const datetimeOriginal = DateTime
.fromISO(datetime, { zone: timezone })

// display datetime as a local date to your visitors
const datetimeLocal = DateTime
.fromISO(datetime, {
zone: Intl.DateTimeFormat().resolvedOptions().timeZone
})

// display datetime in an i18n localized format
const datetimeLocalized = DateTime
.fromISO(dateTime, {
zone: { zone: timezone }
})
.setLocale(locale))

return(



Entry DateTime: {datetime.toLocaleString(DateTime.DATETIME_FULL)}

Local DateTime: {datetimeLocal.toLocaleString(DateTime.DATETIME_FULL)}

Localized DateTime: {datetimeLocalized.toLocaleString(DateTime.DATETIME_FULL)}



)
}
``

Changelog

See CHANGELOG.md

Contributing

See CONTRIBUTING.md