Date

Options See on deno.land

name string

The name of the helper

Default:

"date"

locales record

The loaded locales

formats record

Custom date formats

Default:

{
  ATOM: "yyyy-MM-dd'T'HH:mm:ssXXX",
  DATE: "yyyy-MM-dd",
  DATETIME: "yyyy-MM-dd HH:mm:ss",
  TIME: "HH:mm:ss",
  HUMAN_DATE: "PPP",
  HUMAN_DATETIME: "PPPppp"
}

Description

This plugin registers the date filter, which allows manipulating and formatting a datetime value in different locales. It uses the date-fns library under the hood.

<time>{{ createdAt |> date }}</time>

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import date from "lume/plugins/date.ts";

const site = lume();

site.use(date(/* Options */));

export default site;

Formats

By default, the value is formatted to yyyy-MM-dd, but you can use the first argument to set a different format. See the date-fns documentation for more info.

<time>{{ createdAt |> date('MM/dd/yyyy') }}</time>

There are some predefined formats that you can use:

<time datetime="{{ createdAt | date }}">
  {{ createdAt |> date('HUMAN_DATE') }}
</time>

After installing the plugin you can edit or add more named formats, so it's easier to apply them in templates:

site.use(date({
  formats: {
    "MY_FORMAT": "MM-dd-yyyy",
  },
}));

<time>{{ createdAt |> date('MY_FORMAT') }}</time>

Locales

date-fns has support for multiple locales. You can configure them in _config.ts by importing them from npm:

import date from "lume/plugins/date.ts";
import { gl } from "npm:date-fns/locale/gl";
import { es } from "npm:date-fns/locale/es";

site.use(date({
  locales: { gl, es },
}));

Use the second argument to set the locale:

<time datetime="{{ createdAt |> date }}">
  {{ createdAt | date("HUMAN_DATE", "gl") }}
</time>