HTML 日期选择器如何允许像 00.00.1990 (dd.MM.YYYY) 这样的日期答案

【问题标题】：HTML Date Picker how to allow Date like 00.00.1990 (dd.MM.YYYY)HTML 日期选择器如何允许像 00.00.1990 (dd.MM.YYYY) 这样的日期
【发布时间】：2022-01-17 16:20:18
【问题描述】：

我有一个表格，人们可以在其中输入他们的出生日期。这个星球上有些人没有记录在案的出生日期，所以他们的出生日期是 00.00.1990（例如，许多人知道年份但不知道确切的日期或月份）。使用基本的 html 输入类型日期是不可能输入这种日期的。有没有可能允许这种格式？

<label>Date of birth</label>   
<input placeholder="dd.MM.YYYY" type="date" /> //User should be possible to type in 00.00.1990

在这种情况下，1990 年只是一个例子，最重要的是，日期和月份可以是 00。现在，当我输入 00.00.1990 时，日期选择器会自动将其更正为 01.01.1990。是否有可能停用此功能？

【问题讨论】：

标签： javascript html date

【解决方案1】：

HTML specification 声明输入类型日期的值必须是空字符串或valid date。输入的值以 YYYY-MM-DD 格式表示（尽管显示格式通常基于主机系统或浏览器的语言）。

将近似日期编码为 00.00.YYYY 不是一个好主意，因为它不能表示为 Date 对象并且需要特殊解析。

考虑有两种出生日期类型：精确和近似。对于精确的日期，存储年、月和日（即有效日期）。对于近似类型，存储已知或估计值，例如年或年月。任何处理数据的东西都可以处理它，但是适合其上下文，例如将缺失的月份和日期值设置为 1 或中间范围（月 = 六月，日 = 15），因此 DOB 可以表示为 Date 对象，无论它是精确与否。

对于数据输入，让用户选择日期类型并相应地输入值，例如

function showDOBFields(evt) {
  // Get precision type
  let precision = document.querySelector('[name="datePrecision"]:checked').value;
  // Show controls based on checked radio button
  document.querySelectorAll('.dobSelect').forEach(
    el => el.style.display = el.id == precision? '' : 'none'
  );
}

// Add listeners to radio buttons
window.onload = function() {
  // Initialise display
  showDOBFields();
  // Add listeners
  document.querySelectorAll('[name="datePrecision"]').forEach(el =>
    el.addEventListener('click', showDOBFields)
  )
};

.subHeading {
  font-weight: bold;
  font-size: 110%;
}
.userInfo {
  font-size: 80%;
  color: #999999;
}

<span class="subHeading">Date of birth</span>
<br>
Precise: <input type="radio" checked name="datePrecision" value="preciseDate"><span class="userInfo">Full date is known</span>
<br>
Approximate: <input type="radio" name="datePrecision" value="approximateDate"><span class="userInfo">Only an approximate date is known (year or year and month)</span>
<br>

<div id="preciseDate" class="dobSelect">
  <input type="date" id="dobPrecise">
</div>
<div id="approximateDate" class="dobSelect">
  <span class="userInfo">Input either year or year and month</span>
  <br>
  Year: <input type="number"><br>
  Month: <input type="number"><br>
</div>

传递数据时，传递一个像这样的对象：

{dateOfBirth: {
   precise: true,
   value: '1990-01-01'}
 }, 
{dateOfBirth: {
   precise: false,
   value: '1990'}
 },

【讨论】：