当前的实现可以大幅改进：

• 有一个不必要的输入属性 dateStr，它接受字符串。
• willUpdate 周围的代码有点混乱且是命令式的。
• 如果用户将 date 设置为新的日期，dateStr 不会被更新。

这些问题的根本原因是 Lit 没有默认的转换器来将 string 转换为 Date 对象。这正是自定义特性转换器的用武之地！自定义特性转换器可以通过提供将 string 特性转换为 Date 对象属性的方式来清理 date-display 的实现。

在这一步中，你将定义一个自定义特性转换器，它能够将日期字符串特性转换为 JavaScript Date 对象属性，以及反向转换。

你会注意到编辑器面板中有一个新的空文件 date-converter.。使用它来定义一个返回转换器的函数。

• 导出一个名为 dateConverter 的函数。
  • 该函数应接收一个 locale 字符串作为参数。
• dateConverter 应返回一个包含以下方法的 JavaScript 对象：
  • toAttribute：一个接收 Date 并返回字符串的函数。
  • fromAttribute：一个接收字符串并返回 Date 的函数。

import type {ComplexAttributeConverter} from 'lit';

export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
  return {
    toAttribute: (date: Date) => {
      return date.toLocaleDateString(locale);
    },
    fromAttribute: (value: string) => {
      return new Date(value);
    }
  }
};

export const dateConverter = (locale) => {
  return {
    toAttribute: (date) => {
      return date.toLocaleDateString(locale);
    },
    fromAttribute: (value) => {
      return new Date(value);
    },
  };
};

恭喜！你刚刚定义了一个自定义特性转换器！有关更多信息，请参阅提供自定义转换器。

在下一步中，你将让这个新转换器发挥作用。