laydate根据时间粒度控制组件年月日显示，前端效果如下：
选择粒度月份：
选择粒度年份：
代码如下：
<script>
$(function () {
//常规用法
laydate.render({
elem: '#startTime',
theme: '#0099FF',
trigger: 'click'
});
laydate.render({
elem: '#endTime',
theme: '#0099FF',
trigger: 'click'
});
//年月选择器
laydate.render({
elem: '#month',
type: 'month',
theme: '#0099FF',
trigger: 'click'
});
//年选择器
laydate.render({
elem: '#years',
type: 'year',
theme: '#0099FF',
trigger: 'click'
});
//$("#selectday").hide();
$("#selectmonth").hide();
$("#selectyear").hide();
//给div添加回显控制
if($("#ld").val() == 0 ) {
$("#selectday").show();
$("#selectmonth").hide();
$("#selectyear").hide();
} else if($("#ld").val() == 1 ) {
$("#selectday").hide();
$("#selectmonth").show();
$("#selectyear").hide();
}else if($("#ld").val() == 2 ) {
$("#selectday").hide();
$("#selectmonth").hide();
$("#selectyear").show();
}
//给div添加change事件
$("#ld").change(function() {
if($(this).val() == 0 ) {
$("#selectday").show();
$("#selectmonth").hide();
$("#selectyear").hide();
} else if($(this).val() == 1 ) {
$("#selectday").hide();
$("#selectmonth").show();
$("#selectyear").hide();
}else if($(this).val() == 2 ) {
$("#selectday").hide();
$("#selectmonth").hide();
$("#selectyear").show();
}
});
$("#query").click(function(){ //查询
$("#startTime").val($("#startTime").val());
$("#endTime").val($("#endTime").val());
$("#month").val($("#month").val());
$("#years").val($("#years").val());
$("#ld").val($("#ld").val());
$("#form0").submit();
});
});
</script>jsp页面需要引入layui
<div class="layui-row">
<div class="layui-input-inline">
<label class="layui-form-label" style="padding-top: 25px;">粒度:</label>
<select id="ld" name="ld" lay-filter="ld" style="border-radius: 5px;" value="${ld}">
<option value="0" <c:if test="${'0' eq ld}">selected</c:if>>日</option>
<option value="1" <c:if test="${'1' eq ld}">selected</c:if>>月</option>
<option value="2" <c:if test="${'2' eq ld}">selected</c:if>>年</option>
</select>
</div>
<div id="selectday" class="layui-input-inline">
<div class="layui-input-inline" >
<label class="layui-form-label">开始:</label>
<input size="3" type="text" class="form-control" style="width: 110px" readonly=readonly
id="startTime" name="startTime" value="${startTime}"></input>
</div>
<div class="layui-input-inline">
<label class="layui-form-label">结束:</label>
<input size="3" type="text" class="form-control" style="width: 110px" readonly=readonly
id="endTime" name="endTime" value="${endTime}"></input>
</div>
</div>
<div id="selectmonth" class="layui-input-inline">
<input size="3" type="text" class="form-control" style="width: 110px" readonly=readonly
id="month" name="month" value="${month}"></input>
</div>
<div id="selectyear" class="layui-input-inline">
<input size="3" type="text" class="form-control" style="width: 110px" readonly=readonly
id="years" name="years" value="${years}"></input>
</div>
<div class="layui-input-inline">
<button id="query" style="margin-left: 94%;" class="layui-btn layui-btn-primary">查询</button>
</div>
</div>