Show dates in collection list

Questions
1

Hello, I have a couple of date columns in the child items of a node. I am trying to show these dates in the UI for the collection. For plain text columns it works fine ( as the email example in the docs link below) but when I select a date column all I get is [object object]. I understand the old Angular filters don’t work anymore. So how do I display a date column.

https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/collection

2

Hi @mrdalfors

There’s comments on this thread which indicate that depending on which datatype you are using you will get [object object] for a date picker.

You may want to try changing the underlying data type if that’s possible. If not, you could try ${ value.date } or you may need to create a custom UFM filter, something like:

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

class UmbUfmDateFormatFilterApi extends UmbUfmFilterBase {
  filter(value, format) {
    if (!value) return value;
    const date = value instanceof Date ?
      DateTime.fromJSDate(value) :
      typeof value === 'string' ?
        DateTime.fromISO(value) :
        DateTime.fromISO(value.date, { zone: value.timeZone || undefined });
    return date.toFormat(format || "yyyy-MM-dd HH:mm");
  }
}
export { UmbUfmDateFormatFilterApi as api };

Justin

3

Thanks for your reply. I tried to change the datatype but didn’t solve the issue. Value.date showed unformatted date which was better, but not great. In the end I decided to write a Ufm filter. I didn’t use your code, but it got me in the right direction.

4

Thanks for confirming - I guessed a custom UFM filter may be your best option here. Would you mind sharing your code in case anyone else finds it useful?

Justin

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