How do i update a property of a property on a element with a watcher?

[Tim-Wapenaar-Fenetre]

Hi,

I have a CustomElement that has a start and end date.
For the end date i want to update the min property to be the value of the start date.
But i cant get the property to update.

I've tried, like the following, with el$.update but that updates the value of endDate not the min property. i've tried el$.load, this.load and this.update.

Am i missing something?

export default class EndDateField extends BaseElementField {
	name = "EndDateField";

	watchers = {
		[`${this.section}.endDate`]: [
			[
				"startDate",
				(el$, newValue, oldValue) => {
					if (newValue) {
						el$.update({ min: new Date(newValue) });
					} else {
						el$.update({ min: new Date() });
					}
				},
			],
		],
	};

	get schema() {
		return {
			endDate: {
				type: "date",
				label: this.tags.end_date_label,
				rules: ["required"],
				min: new Date(),
				date: true,
				time: true,
			},
		};
	}
}

[adamberecz]

Hi Tim,

The watcher only watches and can update field values not properties.

To do this, you have actually a much easier job:

const EndDateField = class extends BaseElementField {
  name = 'EndDateField';

  get schema() {
    const min = this.elementSchema.startDate || new Date();

    return {
      endDate: {
        type: 'date',
        label: 'End date',
        rules: ['required'],
        min,
        date: true,
        time: true,
      },
    };
  }
};

There's a list of props and methods that you can rely on while creating fields.

Here's a full working demo:
https://stackblitz.com/edit/github-xgynn71x?file=builder.config.js,src%2FApp.vue