Show day-of-week in panel date field - question about coding the plugin

Kirby 4 Solved ✔️
1

I learned to make a plugin to show the day-name before a data field, and it works. The code is below. I like some help to see if I did it the right way.

It’s all new to me, I tried a lot of things and my question is:
Is this the best way to extend the date field and fill the ‘before’ with a value?
It works on my machine, but I’m a bit worried I have omitted some crucial code.

extra question:
I could not get the dayjs library to output day names in my language, despite the 'locale' => 'nl_NL.utf-8' in my kirby config.php file. So I created an array of names. Is there a better way?

Thanks,
René

#sandbox.yml
sections:
      fields:
        type: fields
        fields:
          datewithdayname:
            label: Datumveld met dagnaam
            type: DateFieldwithDayName
            showday: true
            display: DD-MM-YY
            time: false
            calendar: true

/* site/plugins/DateFieldwithDayName/src/index.js */
import NewField from "./components/DateFieldExtra.vue";

window.panel.plugin("rlb/DateFieldwithDayName", {
	fields: {
		DateFieldwithDayName: NewField
	}
});

<!-- site/plugins/DateFieldwithDayName/index.php -->
<?php
Kirby::plugin('rlb/DateFieldwithDayName', [
  'fields' => [
    'DateFieldwithDayName' => [
      'extends' => 'date',
      'props' => [
        'showday' => function(Bool $showday)
          {
            return $showday;
          }
      ]
    ]
  ],
]);

<!-- site/plugins/DateFieldwithDayName/src/components/DateFieldExtra.vue -->
<template>
	<k-date-field :before="getDayName" v-bind="$props" @input="onDateInput" />
</template>

<script>
export default {
	extends: "k-date-field",
	props: {
		showday: {
			type: Boolean,
			default: true
		},
	},
	computed: {
		getDayName() {
			if (this.showday) 
			{
				const dayNameList = ['zondag', 'maandag', 'dinsdag', 'woendag', 'donderdag', 'vrijdag', 'zaterdag'];
				const dayNumber = this.$library.dayjs(this.value).format('d');
				return dayNameList[dayNumber];
			} else {
				return "";
			}
		}
	},	
}
</script>
```**strong text**
2

I think there’s nothing wrong with what you have if it works.

About the extra question:
you should be able to get the localized weekday of a date with vanilla javascript with something like:

const formatter = new Intl.DateTimeFormat(panel.translation.code, { 
	weekday: 'long'
});
return formatter.format(new Date(this.value));

The locale in config.php has only an effect on the server side.

3

Thank you for the localized weekday!

The code needed to be
(.language instead of .translation but close enough!)

const formatter = new Intl.DateTimeFormat(panel.$config.language, {weekday: 'long'});
return formatter.format(new Date(this.value));
4

Looking at this again, panel.translation.code seems to be the right one. While panel.config.translation would be the default panel language (before login). I don’t have any panel.$config.language, so I guess this might change with different kirby versions (4.1.0 here).

5

Oh, I don’t know what I am doing wrong here, I get an error when using panel.translation.code.

I’m checking again and see that I get a console error:
RangeError: date value is not finite in DateTimeFormat format()
when using
DateTimeFormat(panel.translation.code.

Do I need to include some (kirby/panel or date) component in index.js or the .php file maybe?

6

That error comes from the line with formatter.format(new Date(this.value)); and should indicate that the passed date isn’t valid somehow.

Could you do a

console.log('DATE IS: ', this.value, new Date(this.value));

// business as usual...
const formatter = new Intl.DateTimeFormat(panel.translation.code, { 
	weekday: 'long'
});
return formatter.format(new Date(this.value));

and see what this.value is when it generates an error?

7

Thanks! I’ve added the console.log and it turned out, with new fields there is no date yet. And this caused the error. (Also I have more bugs, so some date fields were not filled.)

So I changed it:
only if this.value is filled the code will be executed. Now it’s working fine!

Thanks for your help!
René

1 Like