layui时间控件选择时间范围

最新推荐文章于 2024-03-29 17:25:33 发布

置顶ぎ风な

最新推荐文章于 2024-03-29 17:25:33 发布

阅读量385

点赞数

文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/weixin_44401596/article/details/117745968

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
</head>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js "></script>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.all.js "></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
    <div class="layui-inline">
        <div class="layui-input-inline">
              <input type="text" name="start_time" class="layui-input" id="start_time" 
                     placeholder="开始时间(修改时间)">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" name="end_time" class="layui-input" id="end_time" 
                    placeholder="结束时间(修改时间)">
        </div>
    </div>

    <button  id = 'btn'>搜索</button>
    <button id = 'btn2'>重置</button>
</body>
</html>
<script>
   layui.use([ 'laydate'], function(){
    var $ = layui.$;
    var laydate = layui.laydate;
    var nowTime = new Date().valueOf();
    var max = null;

       var start = laydate.render({
        elem: '#start_time',
        type: 'datetime',
        max: nowTime,
        btns: ['clear', 'confirm'],
        done: function(value, date){
            endMax = end.config.max;
            end.config.min = date;
            end.config.min.month = date.month -1;
        }
    });
    var end = laydate.render({
        elem: '#end_time',
        type: 'datetime',
        max: nowTime,
        done: function(value, date){
            if($.trim(value) == ''){
                var curDate = new Date();
                date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
            }
            start.config.max = date;
            start.config.max.month = date.month -1;
        }
    });
})
$("#btn").click(function(){
  console.log($('#start_time').val())
  console.log($('#end_time').val())
});
$("#btn2").click(function(){
 $('#start_time').val('')
 $('#end_time').val('')
})
</script>

ぎ风な

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui时间控件选择时间范围

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ind
复制链接

扫一扫