元素创建date输入字段,允许轻松输入日期 - 这包括年,月和日,但不包括time。
控件的用户界面从浏览器到浏览器都有所不同,目前支持是不完整的,请参阅浏览器兼容性以获取更多详细信息。在不受支持的浏览器中,控件会优雅地降级为简单.对于那些不使用支持浏览器的用户,Chrome / Opera日期控件看起来像这样:
和边缘日期控件看起来像这样:
值
表示日期的DOMString,或者为空
活动
改变和输入
支持的通用属性
自动完成,列表,只读和步骤
IDL属性
list,value,valueAsDate,valueAsNumber。
方法
select(),stepDown(),stepUp()
值
ADOMString表示输入到输入中的日期的值。您可以通过在value属性中包含日期来为输入设置默认值,如下所示:
有一件事要注意的是,显示的日期格式与实际不同value- 所显示的日期格式将根据用户浏览器的设置区域选择,而日期value总是格式化的yyyy-mm-dd。
您还可以使用该HTMLInputElement.value属性在JavaScript中获取和设置日期值,例如:
var dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01';
使用日期输入
日期输入乍看起来很方便 - 它们为选择日期提供了一个简单的用户界面,并且将发送到服务器的数据格式标准化,而不管用户的区域设置如何。但是,由于浏览器支持有限,因此存在问题。
我们将考虑基本的和更复杂的用途,然后就减轻浏览器支持问题提供建议(请参阅处理浏览器支持)。
日期的基本用法
最简单的使用涉及基本和元素组合,如下所示:
Enter your birthday:
设置最大和最小日期
您可以使用min和max属性来限制用户可以选择的日期。在下面的例子中,我们将最小日期:
Choose your preferred party date:
这里的结果是, 只有在4月的天数可以选择-只有 "天" 部分的文本值将是可编辑的, 和日期以