laydate根据时间粒度自由控制组件显示查询

本文主要是介绍laydate根据时间粒度自由控制组件显示查询，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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=readonlyid="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=readonlyid="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=readonlyid="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=readonlyid="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> 

 

这篇关于laydate根据时间粒度自由控制组件显示查询的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---