input框选择年份、月份查询控件（附mybatis获取方法）

• 【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】
• 【创作不易，点个赞就是对我最大的支持】

前言

仅作为学习笔记，供大家参考
总结的不错的话，记得点赞收藏关注哦！

效果图（一）

效果图（二）月份

效果图（二）年份

效果图（一）代码

html代码

 <label>选择月份：</label>
  <input type="month" id="startTime" placeholder="请选择时间"/>

js代码设置默认值

		var date=new Date();
        var nowMonth=date.getMonth()+1;//获取当前月份(0-11,0代表1月)
        var nowDate=date.getFullYear()+"-"+((nowMonth>=1 && nowMonth <=9)?"0"+nowMonth:nowMonth);
        document.getElementById("startTime").value =nowDate;

效果图（二）代码

html代码

 <li>
       <label>选择月份：</label>
       <input type="text" id="startTime" name="startTime" placeholder="请选择时间"/>
  </li>
  <li>
        <label>年份：</label>
        <input name="year" id="year" style="display: inline; width: 80px;" type="text" autocomplete="off" readonly>
 </li>

js代码设置默认值

    //月份选择器
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startTime', //指定元素
            type:'month',
        });
    });
    
    //设置默认为当前年份
    var nowDate = new Date();
            var fullYear = nowDate.getFullYear();
            $("#year").val(fullYear);
    //年份选择器
    layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#year',
                type: 'year',
            });
        });
    

mybatis代码

注意：时间类型不可以判断！=‘’，否则会类型错误

--月份(实体类用的是Date)
 <if test="TBSJ != null ">
 and DATE_FORMAT(sbyj.TBSJ,'%Y-%m') >= DATE_FORMAT(#{startTime},'%Y-%m')
 </if>

-- 年份(实体类我直接用String)
 <if test="year != null ">and  YEAR(s.messageTime) = #{year}</if>

创作不易，点个赞就是对我最大的支持~

---

wxgzh：程序员温眉

CSDN：程序员温眉

每天进步一点点的程序员