相关文章推荐
爱旅游的柠檬  ·  苹果取消打赏分成30% ...·  1 年前    · 
机灵的手电筒  ·  北京大学城市与环境学院_个人简历·  2 年前    · 
爽快的可乐  ·  国家税务总局青岛市税务局·  3 年前    · 
冷冷的红金鱼  ·  2020北京车展：LEVC与罗伦士联名高定车 ...·  3 年前    · 
不开心的消防车  ·  二次元手游阴阳师也要出二觉？这手段实在是高超 ...·  3 年前    · 
Code  ›  <input type="date"> - HTML（超文本标记语言） | MDN
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/input/date
大气的芒果
1 周前

一个字符串，代表着输入到输入框的日期值。输入的日期按照 日期字符串格式 所描述的 ISO8601 标准进行格式化。

你可以通过在 value 属性中包含日期来为输入设置默认值，如下所示：

html 
<input type="date" value="2017-06-01" />

备注：有一点需要注意的是，在格式方面显示的日期与实际的 value 不一样——显示的日期格式取决于用户浏览器的区域设定，而经解析的 value 的格式始终为 yyyy-mm-dd。


当然你也可以通过 JavaScript 代码获取和设置 HTMLInputElement 的 value 和 valueAsNumber 属性，例如：


js
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)

这行代码查找 type 为 date 的第一个 <input> 元素，并且将其值设置为 2017-06-01（2017 年 6 月 1 日）。稍后将以字符串和数字的形式读取出这个值。

    
对于所有 <input> 元素的大部分通用属性也对 date 输入起作用，但可能不会影响它的表现，如 size 和 placeholder 属性。除了共有属性外，date 输入还提供以下属性。

    
所接受最新的日期。如果输入到该元素中的 value 发生在此之后，则元素将无法通过约束验证。如果 max 属性的值不是格式为 yyyy-mm-dd 的有效日期星期字符串，则该元素没有最大日期值。


如果同时设置了 max 和 min 值，此值必须晚于或等于 min 属性指定的日期值。

    
所接受最早的日期。如果输入到该元素中的 value 发生在此之前，则元素将无法通过约束验证。如果 min 属性的值不是格式为 yyyy-mm-dd 的有效日期星期字符串，则该元素没有最小日期值。


如果同时设置了 max 和 min 值，此值必须早于或等于 max 属性指定的日期值。

    
step 属性指定了值必须满足的粒度，或者是下文描述的特殊值 any。值必须满足基础的步进值，才有效。如果指定了 min 属性，则由 min 属性决定，否则，使用 value 属性的值，如果上述两个值都不存在，则提供适当的默认值。


字符串值 any 意味着不使用步进值，任意值都可以接受（除其他制约因素如 min 或 max 之外）。


备注：当用户输入的数据不符合步进配置时，用户代理可能会四舍五入到最近的有效值，当有两个同样接近的选项时，更倾向于正方向的数字。


对于 date 输入，step 的值以天为单位，并被视为等于 86,400,000 乘以 step 值的毫秒数（基础数值是毫秒）。step 的默认值为 1，表示 1 天。


备注：将 date 输入的 step 值指定为 any 与指定为 1 的效果相同。

    
使用日期输入控件

    
日期控件提供了一个简单的日期选择 UI 界面，还标准化了发送到服务器的数据格式，而与用户的浏览器或区域设置无关。


在本章，我们将研究 <input type="date"> 基础的和更复杂的用法。

    
日期控件基本用法

    
<input> 和 <label> 元素组合是 <input type="date"> 最简单的使用方法，如下所示：


html
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>
  <p><button>Submit</button></p>
</form>

这段 HTML 代码将所输入的日期作为 bday 的参数发送至 https://example.com，获得了像这样的 URL https://example.com/?bday=1955-06-08 。

    
设置日期最大和最小值

    
你可以通过 min 和 max 属性去限制用户的可选日期范围。在随后的例子中，我们将设定日期最小值为 2017-04-01，最大值为 2017-04-30：


html
<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

在结果中我们可以看到，只有 2017 年 4 月份的日期可选——输入框中可以编辑的部分只有“日”这部分，并且超出 4 月份以外的日期不能通过日期控件的选择组件选择。


备注：你应该可以使用 step 属性来改变每次最佳日期时步进（增加值）的天数（例如：或许你只希望使周六可以选）。但是，在撰写这篇文章的时候，还没有可靠的实现。

    
控制输入框大小

    
<input type="date"> 不支持诸如 size 的表单大小属性。你必须依靠 CSS 来确定大小。

    
默认情况下，<input type="date"> 对输入的值不会做任何校验。接口实现通常不会让你输入任何非日期的东西（这一点很有帮助），但是你仍然可以留空或者（在被优雅降级为 text 类型的输入框时）输入一个不合法的值（例如 4 月 32 日）。


如果你使用 min 和 min 属性去限制可用日期（参见设置日期最大和最小值），对于支持的浏览器来说如果你尝试提交一个超出给定范围的日期，那么它将抛出一个错误。然而，你必须检查这些结果以确保他们在这些日期范围内，因为只有在用户设备上完全支持日期选择器的情况下，才能执行这些操作。


另外，你可以使用 required 属性强制填写日期，如果你尝试提交一个未填写日期的字段，将会抛出错误。即使优雅降级为 text 类型输入框，在大多数浏览器也是可以工作的。


让我们看一个例子——我们设置了日期的最大和最小值，并且将日期字段设定为必填：


html
<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>
    <button>Submit</button>
</form>

如果你尝试提交一个不完整日期的表单（或者超出日期选择设定范围），浏览器将会显示一个错误。尝试一下这个例子：


这是上面例子使用的 CSS。我们基于 :valid 和 :invalid 伪类来在输入框旁边添加小图标。我们必须把图标放在 input 旁边的 <span> 里面，而并不是它本身，因为在 Chrome 中被放置在表单中生成的内容不能有效的样式化或者显示。


css
label {
  display: flex;
  align-items: center;
span::after {
  padding-left: 5px;
input:invalid + span::after {
  content: "✖";
input:valid + span::after {
  content: "✓";

警告：客户端表单验证不能替代服务端验证。对于某人来说，对 HTML 进行调整以使其绕过验证或完全删除验证太容易了，甚至也可以完全绕开 HTML 并将数据直接提交到服务器。如果服务器端代码无法验证其接收到的数据，则在提交格式不正确的（或太大，类型错误……）的数据时，灾难可能会发生。

    
处理浏览器支持问题

    
在不支持的浏览器上，日期输入框会被降级为文本输入框，但这同时带来了用户界面不统一（呈现的控件不同）和数据处理方面的问题。


第二个问题更为严重；正如我们早些时候提到的，对于日期输入框，实际值总是会被格式化为 yyyy-mm-dd。另一方面对于文本输入框，默认情况下浏览器并不知道日期格式应该怎么样被格式化，而且人们书写日期格式的方式有很多，例如：


  • ddmmyyyy
    • 

  • dd/mm/yyyy
    • 

  • mm/dd/yyyy
    • 

  • dd-mm-yyyy
    • 

  • mm-dd-yyyy
    • 

  • Month dd yyyy
    • 

    解决这些问题的方法之一就是对日期控件设置 pattern 属性。即使日期输入不使用它，文本输入也会用到它。例如，请尝试在不支持的浏览器上看下面的例子：
    

    html
    <form>
  <label>
    Enter your birthday:
    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity"></span>
  </label>
    <button>Submit</button>
</form>

    如果你尝试提交不符合模式 ####-##-##（其中 # 是 0 到 9 的数字）的输入，你将会看到浏览器显示一个错误，并且高亮显示输入无效。当然，这并不能阻止人们输入无效的日期或者格式不正确的日期，因此我们需要更进一步。
     
    推荐文章
    爱旅游的柠檬  ·  苹果取消打赏分成30% 马化腾亲自上门沟通的结果？_手机新浪网
    1 年前
    机灵的手电筒  ·  北京大学城市与环境学院_个人简历
    2 年前
    爽快的可乐  ·  国家税务总局青岛市税务局
    3 年前
    冷冷的红金鱼  ·  2020北京车展：LEVC与罗伦士联名高定车型LX全球首秀-手机新浪汽车
    3 年前
    不开心的消防车  ·  二次元手游阴阳师也要出二觉？这手段实在是高超 - 知乎
    3 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    Code - 代码工具平台
    © 2024 ~ 沪ICP备11025650号