layui框架实战案例(7)：时间范围选择及时间处理的解决方案

项目需求

使用laydate插件，实现在一个input表单内时间范围的选择。

项目操作 外部引入

HTML代码

        
            
                
                    
                        
                            时间范围：
                            
                                
                            
                      查询
                        
                    
                
            
        
    

js代码

      //layui时间筛选;
        layui.use(['form', 'laydate'], function () {
            var form = layui.form;
            // layui.use('laydate', function () {
            var laydate = layui.laydate,
                    sortObject = {field: 'createTime', type: null},
                    createTimeFrom,
                    createTimeTo;
            laydate.render({
                elem: '#user-createTime',
                range: true,
                trigger: 'click',
                type: 'date',
                range: '至',
                format: 'yyyy-MM-dd'
            });
        })

 //渲染图表; By Poleung 2020-09-23
        $(function () {
            //时间筛选加载;
            $("#dataTime").click(function () {
                //获取参数;
                var createTime = $("#user-createTime").val();
                //验证时间不能为空;
                if (createTime == "") {
                    alert("筛选时间范围不能为空");
                    $("#user-createTime").focus();
                    return false;
                }
                //处理时间格式;
                var fromTime = createTime.split("至")["0"].trim();
                var toTime = createTime.split("至")["1"].trim();
                //渲染条件图表；
                getAllData("3", fromTime, toTime);
            })
        })

Done！