layui组件--选择时间文本框

系统管理员 2022-10-29 03:30 60阅读 0赞

## layui组件–选择时间文本框 ##

通过使用layui框架，创建一个起始时间和终止时间都有的时间选择的组件。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            <title>开始使用layui.</title>
            <link rel="stylesheet" href="../../layui学习/layui/css/layui.css">
        </head>
        <body>
     
            <form class="layui-form " action="">
                <div class="layui-form-item">
     
                    <div class="layui-inline">
                        <label class="layui-form-label">选择日期：</label>
                        <div class="layui-input-inline">
          					<input type=" text" name="price_min" placeholder="" autocomplete="off"
                         class="layui-input " id="test1">
                        </div>
                        <div class="layui-form-mid">~</div>
                        <div class="layui-input-inline">
          					<input type=" text" name="price_max" placeholder="" autocomplete="off"
                         class="layui-input" id="test2">
                        </div>
                    </div>
     
                    <div class="layui-inline">
                        <select name="city" lay-verify="required">
                            <option value="">---请选择---</option>
                            <option value="1">资料预警份数</option>
                            <option value="2">预警网络数量</option>
                            <option value="3">网络资料类型</option>
                        </select>
                    </div>
        
                    <button type="button" class="layui-btn layui-btn-lg">分析</button>
                </div>
     
            </form>
     
     
            <script src="../../layui学习/layui/layui.all.js"></script>
            <script src="../../jQuery/js/jquery-v3.5.1.min.js"></script>
            <script>
            //1.引用layui，包括js，css,jquery
            //2.模块获取
                layui.use(['layer', 'laydate', ], function(){
         
                      var layer = layui.layer;//获取layer模块,
                      var laydate = layui.laydate//获取laydate模块,
                      
            //3.操作模块,设置相应属性/参数
                      var start = laydate.render({
         //设置 render ？Vue？
                          elem:'#test1', //帮顶元素,id\DOM
                          min:'1950-1-1',//最小值,string类型
                          btns:['confirm'],//工具按钮,内部值数组clear,now,config ?
                          istoday:true,
                          done:function(value,date){
         
                              //回调 控件选择完毕后的回调
                                //点击日期、清空、现在、确定均会触发。
                                //(value, date, endDate)回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                              endMax = end.config.max;
                              end.config.min = date;
                              end.config.min.month=date.month-1;
                              
                          },
                          fomat:'yyyy-MM-dd',
                      });
                      var end = laydate.render({
         
                          elem:'#test2',
                          max:'2099-12-31',
                          btns:['confirm'],
                          istoday:false,
                          done:function(value,date){
         
                              if ($.trim(value)=='') {
         
                                  var curDate = new Date();
                                 date = {
         
                                     'date':curDate.getDate(),
                                     'month':curDate.getMonth(),
                                     'year':curDate.getFullYear(),
                                 };
                                 
                              }
                             start.config.max = date;
                             
                             start.config.max.month = date.month-1;//月份1-12 存储数组[0-11],
                          },
                          format:'yyyy-MM-dd',
                      });
                    });
                    
            </script>
        </body>
    </html>

如有问题，请及时指正！！！