如何在日期输入字段和数字输入字段之间进行双向同步？

Posted 2023-02-16

【中文标题】如何在日期输入字段和数字输入字段之间进行双向同步？

【英文标题】：How to do di-directional syncing between a date input field and a number input field?

【发布时间】：2021-12-13 22:56:05

【问题描述】：

我正在尝试在 Vue.js 中创建一个“生日”组件。我有 2 个v-text-field 组件，一个具有 type="date"，另一个具有 type="number"。

这个想法是用户要么输入出生日期，要么输入他们的年龄。如果他们输入年龄，则会更改日期输入中的内容，反之亦然。

除了我更改年龄输入外，一切都很好。它不会更新日期输入值，而是将其还原为mm/dd/yyyy。

我创建了一个代码笔here

我无法弄清楚为什么它不起作用，因为底层数据属性是正确的（我添加了一个派生文本区域以显示属性正在正确更新，您可以在下面的“出生日期”输入示例中看到.

【问题讨论】：

您的问题是关于 age 计算 和 date 计算 使用的格式之间的差异。第二个产生 YYYY-MM-DD 而第一个产生 MM/DD/YYYY。在年龄计算中使用this.birthDate = newBirthDate.toISOString().substring(0, 10) 而不是你的，或者更合适的。 `

天哪，谢谢！发布答案，我会接受:)

【参考方案1】：

您的问题是关于年龄计算和日期计算使用的格式之间的差异。第二个产生 YYYY-MM-DD，而第一个产生 MM/DD/YYYY。 试试这个

this.birthDate = newBirthDate.toISOString().substring(0, 10)

而不是你的年龄计算，或者更合适的。