Show dates in collection list

Questions
5

I wanted a plain vanilla js without the dependency on Luxon so this is what I used

import { UmbUfmFilterBase } from '@umbraco-cms/backoffice/ufm';

function toValidDate(value) {
    let date;

    if (value instanceof Date) {
        date = value;
    } else if (typeof value === "string") {
        date = new Date(value);
    } else if (value?.date) {
        date = new Date(value.date);
    } else {
        return null;
    }

    if (isNaN(date.getTime())) return null;

    return date;
}

function formatDate(date, format) {
    const pad = (n) => String(n).padStart(2, "0");

    const map = {
        yyyy: date.getFullYear(),
        MM: pad(date.getMonth() + 1),
        dd: pad(date.getDate()),
        HH: pad(date.getHours()),
        mm: pad(date.getMinutes()),
        ss: pad(date.getSeconds())
    };

    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, m => map[m]);
}

export default class UmbUfmDateFormatFilterApi extends UmbUfmFilterBase {
    filter(value, format = "yyyy-MM-dd HH:mm") {
        if (!value) return value;

        const date = toValidDate(value);
        if (!date) return value;

        return formatDate(date, format);
    }
}

And then for umbraco-package.json

{
  "$schema": "../../umbraco-package-schema.json",
  "id": "UfmFilter",
  "name": "UfmFilter",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "ufmFilter",
      "alias": "My.UfmFilter.FormatDate",
      "name": "Date Format UFM Filter",
      "meta": {
        "alias": "formatdate"
      },
      "js": "/App_Plugins/UfmFilter/formatdate.js"
    }

  ]
}
1 Like