项目需求
使用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！
