zoukankan      html  css  js  c++  java
  • 二十八、layui的日历组件使用

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>日期</title>
            <link rel="stylesheet" href="../layui/css/layui.css">
        </head>
        <body>
            <blockquote class="layui-elem-quote">目前Layui中的日期组件还是layDate 1.1的改良版,它后续将会进行一次重写。</blockquote>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>顺便列举几个常用例子</legend>
            </fieldset>
            <div class="layui-form-pane" style="margin-top: 15px;">
                <div class="layui-form-item">
            <label class="layui-form-label">范围选择</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
            </div>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
            </div>
            </div>
            </div>
    
            <script src="../layui/layui.js"></script>
            <script>
    			layui.use('laydate', function(){
    			  var laydate = layui.laydate;
    			  var start = {
    //			    min: laydate.now(),
    			    max: '2099-06-16 23:59:59'
    			    ,istoday: false
    			    ,choose: function(datas){
    			      end.min = datas; //开始日选好后,重置结束日的最小日期
    			      end.start = datas //将结束日的初始值设定为开始日
    			    }
    			  };
    			
    			  var end = {
    			    min: laydate.now()
    			    ,max: '2099-06-16 23:59:59'
    			    ,istoday: false
    			    ,choose: function(datas){
    			      start.max = datas; //结束日选好后,重置开始日的最大日期
    			    }
    			  };
    			
    			  document.getElementById('LAY_demorange_s').onclick = function(){
    			    start.elem = this;
    			    laydate(start);
    			  }
    			  document.getElementById('LAY_demorange_e').onclick = function(){
    			    end.elem = this
    			    laydate(end);
    			  }
    			
    			});
    
    
    
    		</script>
    
        </body>
    </html>
    

      

  • 相关阅读:
    VC2013一些感受
    第三周 分析程序题
    进度条——持续更新
    怪自己,不怪书
    源程序版本管理软件和项目管理软件
    学习进度条
    个人最终总结
    win8以上windows系统eclipse环境下图片显示乱码问题解决
    黄金点游戏
    编码用命令行执行的C语言词语统计程序
  • 原文地址:https://www.cnblogs.com/deng-jie/p/9372779.html
Copyright © 2011-2022 走看看