Add date value in a custom block preview

The CMS Questions
1

Hello,

I am creating some custom blocks based on the cookbook block-factory tutorial and one of my blocks has a date field. I am trying to display this in the preview in the js file for that block. But I am getting nowhere. Any ideas, suggestions?
Thank you.

Joke

2

Could you post what you have already done?

3

In the yml file:

    date_start:
        label: Start date
        type: date
        time: false
        display: "MMMM DD, YYYY"
        default: now

in the js file:

        event: {
            computed: {
                dateStartField() {
                    return this.field("date_start");                    
                },
            },
            template: `
                <div @dblclick="open">
<time>{{ dateStartField }}</time>
                 </div>
            `
        }, 
}

This shows me the full value of the field as it is in the content text file. I am not sure how to apply the date conversion functions in the Vue file to get a “pretty” date.

4

You can use the dayjs library to format your dates: Libraries | Kirby CMS

5

Cool. But I am still unclear how to implement that. What is the $library thing referring to?

6

I have tried this:
return this.field("date_start").$library.dayjs().format("DDMMYYYY");
but it gives an error that it “Cannot read properties of undefined (reading ‘dayjs’)”.

7

Your syntax is a bit off, I think it works like this:

const date = this.$library.dayjs(this.field("date_start").value).format("DDMMYYYY");

Not sure about value…maybe works without.

8

It says “Invalid Date”, with or without the value bit.

9

It works if you use this.content instead of this.field().
Like this:

const date = this.$library.dayjs(this.content.date_start).format("DDMMYYYY");

Thanks for pointing me in the right direction.