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

项目需求

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

项目操作

外部引入

<script src="layui/layui.js">script>
<link rel="stylesheet" href="layui/css/layui.css">

HTML代码

<div class="layui-row layui-col-space20">
        <div>
            <div class="layui-card">
                <div class="layui-card-header layui-row ">
                    <div class="layui-col-xs12 layui-col-md12">
                        <div class="layui-inline">
                            <label class="layui-form-label">时间范围：label>
                            <div class="layui-input-inline">
                                <input type="text" name="time" id="user-createTime" class="layui-input" lay-key="1" placeholder="yyyy-yy-dd至yyyy-yy-dd">
                            div>
                      <a class="layui-btn" id="dataTime" style="background: #00B0F0">查询a>
                        div>
                    div>
                div>
            div>
        div>
    div>

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！