layui 日期选择，开始于结束

最新推荐文章于 2024-07-30 12:01:56 发布

Raywh

最新推荐文章于 2024-07-30 12:01:56 发布

阅读量654

点赞数 1

分类专栏：学习文章标签： layui html js

本文链接：https://blog.csdn.net/wanghu20150107010129/article/details/95448865

版权

学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

学习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/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.all.js"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.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>

日期选择