laydate根据时间粒度自由控制组件显示查询
2019-02-12 10:18
351 查看
laydate根据时间粒度控制组件年月日显示,前端效果如下:
选择粒度月份:
选择粒度年份:
代码如下:
[code] <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
[code] <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>
相关文章推荐
- laydate 时间选择组件对日期的控制
- laydate日期组件增加初始时间设置
- 关于layui的日期和时间组件laydate闪屏的坑
- layDate显示默认时间
- laydate如何根据开始时间或者结束时间限制范围
- bootstrap-datepicker限定可选时间范围 一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,
- 完美解决layDate强制动态显示当前时间(不求评论,但求疯狂转载!)
- Web 表格table实现横向滚动条以及时间组件laydate的使用
- laydate 显示结束时间不小于开始时间的实例
- laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值
- 庭审管理中动态显示今天起7日内的数据,动态查询,并根据已有数据判断新增和修改时的时间冲突问题
- mysql中DATE_FORMAT用法根据时间按周、月、年等查询
- 庭审管理中动态显示今天起7日内的数据,动态查询,并根据已有数据判断新增和修改时的时间冲突问题(2)
- layDate 日期与时间组件 细节
- layui-laydate 时间大小控制
- 在数据库中(Oracle),根据时间查询数据: to_date()和to_char()函数
- 使用Date日期对象来完成,在页面上根据不同时间显示不同的问候语,如:早上好,中午好,下午好,晚上好等信息
- oracle_查询date只显示日期不显示时间
- 时间to_date,层级查询 --工作备忘2016/1/8
- Linux命令之date - 显示、修改系统日期时间