Adding attributes to an extended date field

Kirby 3 Solved ✅
1

Maybe someone with experience in Kirby can help me out?

I’m extending the date field.
How can I add a property, in this example firstOrSecondDay: to the html of the field?
I found in the forum that you can set the template:.

Q1: How can I add my property to the template of the field?
Q2: How can I add the property to the field in the Panel, maybe without the template?

My aim is to be able to reference to this field in another fields method. So some attribute from the blueprint property has to go into the field to be able to reference it. The ‘first day’ is going to make changes to the ‘second day’ field.

panel.plugin("thephrase/eventdate", {
  fields: {
    eventdate: {
      extends: "k-date-field",
      props: {
        firstOrSecondDay: String
      },
      template: `<k-input type="datetime" name="datetime" icon="calendar" id=" {{ firstOrSecondDay }} "/>`,
etc.
etc.

Thanks!

2

You define field props in your index.php, see docs: Fields | Kirby CMS

3

I’m sorry I didn’t make it clear I see, I forgot to point to the example.
When I use {{ firstOrSecondDay }} in the template:
it will not put the property value into the string.

So in the HTML it will read id="{{ firstOrSecondDay }}"
in stead of id="firstday" like I intended.

id=" {{ firstOrSecondDay }} "/>

HTML
<input autocomplete="off" id="{{ firstOrSecondDay }}" placeholder="DD.MM.YYYY" spellcheck="false" type="text" class="k-text-input k-date-input" dir="null"></input>

4

Mustaches cannot be used inside HTML attributes. You have to bind the value to the id attribute like this:

template: `<k-input type="datetime" name="datetime" icon="calendar" :id="firstOrSecondDay"/>`,
5

Thank you! That worked and I learned some Vue :slightly_smiling_face:

Now I am overwriting the id attribute. Would that be a problem? The normal value is a number (id=110) in that case.
I would rather add an attribute like data-position="first". But I am not able to. Do you know how I can do that?

Where can I find the correct template for the date field? The one I am using now, doesn’t look like the default date field.

Thanks again!

6

In the Vue component for the date field. A downloaded kirby version only contains the production code though, so you have to check out the git repo to get the source code.

7

Again thank you !

René