Document

问题：

最近实习做了一个考勤系统的页面，要和php的后端相结合，要求使用原生的html和js，不使用项目管理的方式编写，但是统计界面需要实现一个用户选择年月，根据用户的选择来展示这个月的考勤数据的功能。

所以用原生的html和css怎么实现一个选择年月的功能呢？

解决方式：

经过多途径的搜索，有了一个新的发现，其实我们平时用的html的input标签就有这个功能，只是之前没有用过也没有学到过，现在看来html值得学习的地方真的还有不少

话不多说直接看实现，简单的很！

<!-- 加上这个id是后边设置默认值时使用的 -->
<input type="month" class="month-check" name="month" id="id_yy_input">

input的日期输入类型好像还挺多的，一起来梳理一下：

//日期的输入类型通常是用type来规定的，type的取值如下：

1、date：可以选取年月日三级

2、month：可以选取年月两级

3、week：可以选取星期

4、time：可以选取小时和分钟

5、Datetime：选取年月日加上UTC时间

6、datetime-local：选取年月日加本地时间

其他问题：

1、使用input标签时没有默认值

只使用input标签的话打开是没有默认值的，只会显示一个日期选择的框，但是我们希望打开页面看到的就是我们目前的日期哇，那么怎么来给他设置一个默认值呢？

接下来上代码：（我这里是在html中使用了vue文件引入，所以有一些vue的写法）

标签内容如下：

<!-- 解释一下，这里v-module是数据绑定的意思，其实就是为了获取用户输入的数据，@change是在标签的值变化的时候触发一个函数，我希望它在用户输入的内容改变时自动获取新的数据，所以加了一个函数，id是为了后边获取dom节点赋值做准备的 -->
<input type="month" class="month-check" name="month" v-model="queryTime" @change="date()" id="id_yy_input">

初始值的设置代码如下：

// 给input  date设置默认值
var now = new Date();
//格式化日，如果小于9，前面补0
var day = ("0" + now.getDate()).slice(-2);
//格式化月，如果小于9，前面补0
var month = ("0" + (now.getMonth() + 1)).slice(-2);
//拼装完整日期格式
var today = now.getFullYear() + "-" + (month);
//完成赋值
$('#id_yy_input').val(today);
//解释一下：如果我们想要获取当前时间，可以使用new Date()来获取，但是获取到的是一个时间戳，需要使用get函数获取具体的年或者月或者日的信息
//关于获取当前时间的操作，大家可以自行搜索，有很多文章解释的很详细

 当然我这里是只有年和月，如果你需要日的话，同样把日获取出来以后，拼接在字符串上就好了。

2、对于input输入时间的赋值

从上边设置默认值的js代码中可以看出，赋值使用的是.val()函数，最开始我使用的是innerText， 是不生效的，毕竟input不是div，所以innerText是不生效的。

大家注意吧

敲代码愉快！