Now that the dateConverter has been defined, clean up the implementation of date-display by using the dateConverter.

Use the converter

Permalink to "Use the converter"

Import the dateConverter from date-converter..
Set converter on the date reactive property option to an invocation of dateConverter.
- Pass the navigator.language string as an argument.
Enable attribute conversion for date by removing attribute: false.
Enable the property to be reflected back to the attribute by setting reflect: true.

date-display.

Permalink to "date-display."

import {dateConverter} from './date-converter.js';

export class DateDisplay extends LitElement {
  ...

  @property({converter: dateConverter(navigator.language), reflect: true})
  date = new Date();
  ...

import {dateConverter} from './date-converter.js';

export class DateDisplay extends LitElement {
  static properties = {
    date: {converter: dateConverter(navigator.language), reflect: true},
    dateStr: {type: String, attribute: 'date-str'},
  };
  ...

Clean up references to `dateStr`

Permalink to "Clean up references to dateStr"

Remove the dateStr property.
Delete the willUpdate method. (You no longer need to synchronize dateStr with date.)
Update index.html to use the date attribute instead.

date-display.

Permalink to "date-display."

export class DateDisplay extends LitElement {
  @property({converter: dateConverter})
  date = new Date();

  render() {
    return html`
      <p>The given date is: ${this.date.toLocaleDateString()}</p>
    `;
  }
}

export class DateDisplay extends LitElement {
  static properties = {
    date: {converter: dateConverter},
  };

  constructor() {
    super();
    this.date = new Date();
  }

  render() {
    return html`
      <p>The given date is: ${this.date.toLocaleDateString()}</p>
    `;
  }
}

index.html

Permalink to "index.html"

<date-display date="05/05/22"></date-display>

Now, the date attribute can be properly converted to a JavaScript Date object!