关于input['date']的简单使用

发现

刚开始工作的时候，遇到了需要选择时间的功能需求，当时我就蒙了，虽然说在日常生活中见过很多的日期插件，但是却一直不知道其实 input 本身就有一个名叫 date 的type（当时差点准备自己动手用JS写一个了，后来吐槽的时候一位前辈告诉我的。。。）

使用

input[‘date’] 的使用其实也很简单，就和 input 的其他 type 使用方法一样，只需要在创建的时候声明一下 type 就可以了

<input type="date" />

默认样式是这个亚子

input[‘date’] 在不同的浏览器，或者移动设备上的样式是有轻微差别的，我没有关注过其他的设备样式是什么样子，至少我手机上的样式还挺符合我审美的（又为我偷懒省了一步）

默认值

input[‘date’] 的默认值添加也很简单，只需要添加 value=“xxxx-xx-xx” 就可以为它赋上默认值了

<input type="date" value="2020-05-09" />

虽然在页面上展示时分割符用的是 “/” 但是实际上 value 的分割符使用的是 “-”

通过js进行赋值

既然它是一个关于时间的标签，那么它肯定不能静态的写一个时间值，我们很多时候需要它有一个动态的值在页面加载或者input[‘date’] 创建的时候赋予它，下面是相关js

<input type="date" id="date" >
<script>
	var date = new Date()
	var year = date.getFullYear()
	var month = date.getMonth() + 1 
	/*getMonth获取的月份值会比实际月份小1，所以需要+1*/
	var day = date.getDate()
	if(month < 10){
		month = '0'+ month.toString()
	}
	if(day < 10){
		day = '0'+ day.toString()
	}
	/*
	因为getMonth和getDay返回的都是数字
	所以当月份或者日期小于10的时候其前边的'0'会被干掉
	因此需要进行单独的处理
	如果不处理直接以xxxx-x-x的方式传给value会不生效
	*/
	var preDate = year+'-'+month+'-'+day
	var dateDiv = document.getElementById('date')
	dateDiv.value = preDate
</script>

通过js生成的方式传递给input[‘date’] 标签与直接给其添加value 在实际使用的时候效果是一样的。