前端日期组件layui使用，月模式

初学前端，实战总结

概要

有一个日期组件，我的谷歌浏览器选完日期后，偶尔获取不到最新数据，有一个客户，是经常出不来数据。

日期组件是Wdate：调用的方法是WdatePicker onpicking，代码片段如下：

  <input type="text" name="repairDate"value="${assess.REPAIR_DATE}"onFocus="WdatePicker({onpicking:loadDefaultNum,dateFmt : 'yyyy-MM',lang:'zh-cn'})"id="repairDate" class="input-text Wdate w100" autocomplete="off">

最终解决方案

更换日期组件，换为layui
引入代码如下：

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/static/layui/css/layui.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/common/static/layui/layui.js" ></script>var self=this;
//执行一个laydate实例
layui.use('laydate', function() {laydate = layui.laydate;var month = new Date().getMonth() + 1;month = (month < 10 ? "0" + month : month);laydate.render({elem: '#repairDate',trigger: "click",format: 'yyyy-MM',type: 'month',//, show: true //直接显示value: new Date().getFullYear() + "-" + month,btns: ['now', 'confirm'],done: function (value, date, endDate) {//日期时间被切换后的回调//$('#datatime').change();// self.date = value;// self.dateText = self.dateFormed(value)self.loadDefaultNum();console.log(value); //得到日期生成的值，如：2017-08-18console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。}});
});

效果图

` 最终的效果还不错

我踩过的坑

**` 踩坑1：**程序报错找不到 layui，
原因：我为了新的样式可以覆盖旧的样式，把css 和js 样式放到了最后，放到了我写layui.use(‘laydate’, function() 这段script 的后面。
放到后面，会导致找不到资源。
所以，我放到了这段script 之前。
踩坑2： 因为好久做script的开发，我引入script遇到了报错，我是缺少了type=“text/javascript” 这部分说明

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/static/layui/css/layui.css"/><script type="text/javascript" src="<%=request.getContextPath()%>/common/static/layui/layui.js" ></script>

踩坑3： 在head 部分，script 不写闭合标签会报错。
错误代码是这样的

<script type="text/javascript" src="<%=request.getContextPath()%>/common/static/layui/layui.js" />

小结

script 和css 引入，需要放到代码片段之前。
加油，我会越来越棒的！成为真正的前端。