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