1. 程式人生 > >二十八、layui的日歷組件使用

二十八、layui的日歷組件使用

utf 一次 click today get margin end ntb star

<!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>

  

二十八、layui的日歷組件使用