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.
Add the package to your project.
yarn add netlify-cms-widget-datetimezone
Configure Netlify CMS to use the widget.
// 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.
fields:
- { name: "datetimezone", label: "Start Time", widget: "datetimezone" }
// 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(
<p>
Entry DateTime: {datetime.toLocaleString(DateTime.DATETIME_FULL)}<br />
Local DateTime: {datetimeLocal.toLocaleString(DateTime.DATETIME_FULL)}<br />
Localized DateTime: {datetimeLocalized.toLocaleString(DateTime.DATETIME_FULL)}
</p>
)
}
See CHANGELOG.md
See CONTRIBUTING.md