format date based on front matter format

[btrem]

I'd like to choose a date format in my njk templates depending on its form in the front matter. If it's just a date, e.g., 2023-08-15, then I'd like to display August 15, 2023; if the front matter date includes time info, e.g., 2023-08-15T10:00, then I'd like to display August 15, 2023 10:00. Several approaches are possible, but none are very appealing.

• I could have separate date and time front matter items. But that would break sorting posts by date in collections.
• I could add a front matter item called showTimeInPageDate, but that seems repetitive (I already know I want to display the time because the timestamp includes time)
• I could display time if the time of the post is midight, e.g., the time stamp does not have time, only a date, but this seems hacky, and what if I make a post with an explicit time of midnight?

One possible solution would be to check the date front matter item, and if it's longer than 10 characters, or contains a "T" or ":" there's time. But I can't figure out how to access the date as it appears in my front matter, that is, as a string. Can this be cone?

Or is there a better way to accomplish my goal?

[pdehaan]

Interesting, I haven't looked at this in a long time, but I have some wild theories…

I think this is less of an Eleventy issue and more of a "YAML parses dates" issue.

https://www.11ty.dev/docs/dates/ might be a good starting point. It has a link to https://yaml.org/type/timestamp.html which is mildly interesting.

I'm struggling to find some other good YAML specs/docs for dates specifically, but I did find https://symfony.com/doc/current/reference/formats/yaml.html#dates which says:

YAML uses the ISO-8601 standard to express dates:

2001-12-14T21:59:43.10-05:00

# simple date
2002-12-14

I think I might lean towards adding some other special front matter date string for your date purposes and wrap it with a custom filter that determines the format that you want to use. Like maybe if you convert it to a Date object and the hour:minute is midnight, you just display the date only but if it has a time then you can do whatever locale date formatting you want. 🤷

[pdehaan]

---
dates:
  - 2023-08-15
  - 2023-08-19T10:00
---


{% for d in dates %}
  <li>{{ d | dateFmt }}</li>
{% endfor %}

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {

  eleventyConfig.addFilter("dateFmt", function (date) {
    const _date = new Date(date);
    let fmt = {
      dateStyle: "full",
      timeStyle: "short",
      timeZone: "America/New_York",
    }
    if (_date.getUTCHours() === 0 && _date.getUTCMinutes() === 0) {
      delete fmt.timeStyle;
    }
    return Intl.DateTimeFormat([], fmt).format(_date);
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

OUTPUT

  <li>Monday, August 14, 2023</li>
  <li>Saturday, August 19, 2023 at 1:00 p.m.</li>

Although, looking at that, it might need a bit more tweaking for time zones since it might be assuming one is UTC and the other is possibly not entirely a valid YAML date format.

[btrem]

maybe if you convert it to a Date object and the hour:minute is midnight, you just display the date only but if it has a time then you can do whatever locale date formatting you want.

I think in that case 2023-07-01 would be treated the same as 2023-07-01T00:00. An edge case, I suppose, but still.