0

I'm building a site with a CMS (Netlify) for a local band, and they have future gig dates they will put on the site. So far the dates show up as very long non-formatted strings that include the time and time zone. I'm trying to figure out how to format the dates to be simpler (day, date, time for example).

I've tried plugins like nunjucks-date but I'm a little confused about how to use a plugin (and filters) in this case.

My repo: https://github.com/mollycarroll/serapis-eleventy-2

Example gig entry:

---
layout: gig
venue: Cedar Lake Cellars
date: 2022-05-28
time: 6pm
city: Wright City, MO
---

Gig template:

<h2>{{ venue }}</h2>
<h4>{{ city }} {{ date }} {{ time }}</h4>

config.yml for the CMS:

  - name: 'gigs'
    label: 'Shows'
    folder: 'src/gigs'
    create: true
    slug: '{{month}}-{{day}}-{{venue}}'
    fields:
    - { label: 'Layout', name: 'layout', widget: 'hidden', default: '_includes/gig.njk' }
    - { label: 'Date', name: 'date', widget: 'date', default: '' }
    - { label: 'Time', name: 'time', widget: 'string', default: '' }
    - { label: 'Venue', name: 'venue', widget: 'string', default: '' }
    - { label: 'City', name: 'city', widget: 'string', default: '' }

Thanks for any help.

Molly
  • 23
  • 2
  • 7

1 Answers1

0

First, you should create a filter, let's say src/filters/date.js with the following content:

const { DateTime } = require("luxon");

// Add a friendly date filter to nunjucks.
// Defaults to format of LLLL d, y unless an
// alternate is passed as a parameter.
// {{ date | friendlyDate('OPTIONAL FORMAT STRING') }}
// List of supported tokens: https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens

module.exports = (dateObj, format = 'LLLL d, y') => {
  return DateTime.fromISO(dateObj, { zone: "Europe/Amsterdam", locale: "en" }).toFormat(format);
};

Make sure you check Luxon documentation for details. Then add the filter in .eleventy.js:

module.exports = function(eleventyConfig) {
  ...
  eleventyConfig.addFilter("date", require("./src/filters/date.js"));
  ... 
};

Now you can use it in Nunjacks with a default value {{ date }}, in this example 'LLLL d, y', or any value you need at a certain position on your website {{ date | date('dd. LLLL yyyy.') }}. This can be very useful if you need at some point just month and year or just day and month.

You can even create multiple language filters, like dateEn.js and dateDe.js, and format each to its own language if you have a multilingual site.

Hope this helps.

EDIT: In order for this filter to work the dateObj should be in ISO 8601 format.

  • Thank you! I followed this but unfortunately it's not working at least locally. Is there anything else I should be adding or importing that I might be missing? Let me know if there is any more info I can provide. – Molly May 28 '22 at 20:11
  • Could you please show the error you're getting? "Not working" is a generic comment. –  May 29 '22 at 05:53
  • There isn't an error, just the date isn't showing up formatted the way it should be. Shows as "Fri May 27 2022 18:00:00 GMT-0600 (Mountain Daylight Time)". This is after doing all the implementation steps you outlined. – Molly May 29 '22 at 17:30
  • Sorry, my bad, I'm using API to fetch my data and the dates are coming in ISO 8601 format, hence the ```return DateTime.fromISO``` in the filter. I'm not sure how NetlifyCMS provide a ```date``` string since I'm not using it, but I believe that's where your answer lies. –  May 29 '22 at 18:34