HTML | DOM 输入日期自动完成属性

HTML表单中我们经常需要输入日期的信息，而日期往往存在格式上的不规范，影响处理。为了提高日期输入的体验，DOM提供了input元素的date类型属性，让用户可以用日历选择器方便地选择日期。

语法

<input type="date">

通过设置type为"date"属性，就可以启用日期选择器。

兼容性

| 浏览器 | 版本 | | ------ | ---- | | Chrome | 20+ | | Safari | 5.1+ | | Firefox| 29+ | | IE | 10+ | | Edge | 12+ | | Opera | 9.0+ |

自动完成属性

自动完成属性（Autocomplete）可以帮助用户输入信息更快，更精准，但同时也可能泄露用户隐私，因此需要适度谨慎使用。

HTML自带的自动完成属性

• autocomplete="off" 关闭自动完成
• autocomplete="on" 开启自动完成

表单自动完成值

• name
• email
• username
• new-password
• current-password
• organization-title
• ...

自定义自动完成值

开发者可以使用自定义值来实现自动完成功能，比如最近使用的日期，经常输入的地址等。

<label>最近5个工作日</label>
<input type="text" autocomplete="off" list="recent-dates">
<datalist id="recent-dates">
    <option>2022-01-17</option>
    <option>2022-01-14</option>
    <option>2022-01-13</option>
    <option>2022-01-12</option>
    <option>2022-01-11</option>
</datalist>

其中，<datalist>元素定义了可供选择的可选项，输入时根据输入框的值自动过滤匹配的选项。

示例

在日期输入框中启用自动完成属性autocomplete="off"，同时提供最近5个工作日作为可供选择的可选项。

<label for="datetime-input">日期</label>
<input type="datetime-local" id="datetime-input" autocomplete="off" list="recent-dates">
<datalist id="recent-dates">
    <option>2022-01-17T12:00</option>
    <option>2022-01-14T12:00</option>
    <option>2022-01-13T12:00</option>
    <option>2022-01-12T12:00</option>
    <option>2022-01-11T12:00</option>
</datalist>

结论

输入日期自动完成属性可以提供更好的用户体验，但同时也需要注意保护用户隐私。通过自定义自动完成值提供更多的可选项，可以进一步提升用户体验。