<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. layDate 日期與時間組件

      layDate 是 layui 獨立維護的三大組件之一,我們在 5.0 的版本對其進行了一次全面的重寫

      下載 layDate-v5.0.9 下載量:
      獲得 layDate 文件包后,解壓并將 laydate 整個文件夾(不要拆分結構) 存放到你項目的任意目錄,使用時,只需引入 laydate.js 即可。 下面是一個入門示例:
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>使用 layDate 獨立版</title>
      </head>
      <body>
      <input type="text" id="test1">
      <script src="/laydate/laydate.js"></script> <!-- 改成你的路徑 -->
      <script>
      //執行一個laydate實例
      laydate.render({
        elem: '#test1' //指定元素
      });
      </script>
      </body>
      </html>
        
      示例
      //常規用法
      laydate.render({
        elem: '#test1'
      });
      
      //國際版
      laydate.render({
        elem: '#test1-1'
        ,lang: 'en'
      }); 
              
      //年選擇器
      laydate.render({
        elem: '#test2'
        ,type: 'year'
      });
      
      //年月選擇器
      laydate.render({
        elem: '#test3'
        ,type: 'month'
      });
      
      //時間選擇器
      laydate.render({
        elem: '#test4'
        ,type: 'time'
      });
      
      //時間選擇器
      laydate.render({
        elem: '#test5'
        ,type: 'datetime'
      });
              
      //日期范圍
      laydate.render({
        elem: '#test6'
        ,range: true
      });
      
      //年范圍
      laydate.render({
        elem: '#test7'
        ,type: 'year'
        ,range: true
      });
      
      //年月范圍
      laydate.render({
        elem: '#test8'
        ,type: 'month'
        ,range: true
      });
      
      //時間范圍
      laydate.render({
        elem: '#test9'
        ,type: 'time'
        ,range: true
      });
      
      //日期時間范圍
      laydate.render({
        elem: '#test10'
        ,type: 'datetime'
        ,range: true
      }); 
              
      //自定義格式
      laydate.render({
        elem: '#test11'
        ,format: 'yyyy年MM月dd日'
      });
      laydate.render({
        elem: '#test12'
        ,format: 'dd/MM/yyyy'
      });
      laydate.render({
        elem: '#test13'
        ,format: 'yyyyMM'
      });
      laydate.render({
        elem: '#test14'
        ,type: 'time'
        ,format: 'H點M分'
      });
      laydate.render({
        elem: '#test15'
        ,type: 'month'
        ,range: '→'
        ,format: 'yyyy-MM'
      });
      laydate.render({
        elem: '#test16'
        ,type: 'datetime'
        ,range: '到'
        ,format: 'yyyy年M月d日H時m分s秒'
      }); 
              
      //開啟公歷節日
      laydate.render({
        elem: '#test17'
        ,calendar: true
      });
      
      //自定義重要日
      laydate.render({
        elem: '#test18'
        ,mark: {
          '0-10-14': '生日'
          ,'0-12-31': '跨年' //每年的日期
          ,'0-0-10': '工資' //每月某天
          ,'0-0-15': '月中'
          ,'2017-8-15': '' //如果為空字符,則默認顯示數字+徽章
          ,'2099-10-14': '呵呵'
        }
        ,done: function(value, date){
          if(date.year === 2017 && date.month === 8 && date.date === 15){ //點擊2017年8月15日,彈出提示語
            alert('這一天是:中國人民抗日戰爭勝利72周年');
          }
        }
      }); 
              
      以9:30-17:30為例
      //限定可選日期
      var ins22 = laydate.render({
        elem: '#test-limit1'
        ,min: '2016-10-14'
        ,max: '2080-10-14'
        ,ready: function(){
          ins22.hint('日期可選值設定在 <br> 2016-10-14 到 2080-10-14');
        }
      });
      
      //前后若干天可選,這里以7天為例
      laydate.render({
        elem: '#test-limit2'
        ,min: -7
        ,max: 7
      });
      
      //限定可選時間
      laydate.render({
        elem: '#test-limit3'
        ,type: 'time'
        ,min: '09:30:00'
        ,max: '17:30:00'
        ,btns: ['clear', 'confirm']
      }); 
              
      //同時綁定多個
      lay('.test-item').each(function(){
        laydate.render({
          elem: this
          ,trigger: 'click'
        });
      }); 
              
      //初始賦值
      laydate.render({
        elem: '#test19'
        ,value: '1989-10-14'
      });
      
      //選中后的回調
      laydate.render({
        elem: '#test20'
        ,done: function(value, date){
          alert('你選擇的日期是:' + value + '\n獲得的對象是' + JSON.stringify(date));
        }
      });
      
      //日期切換的回調
      laydate.render({
        elem: '#test21'
        ,change: function(value, date){
          alert('你選擇的日期是:' + value + '\n\n獲得的對象是' + JSON.stringify(date));
        }
      });
      
      //不出現底部欄
      laydate.render({
        elem: '#test22'
        ,showBottom: false
      });
      
      //只出現確定按鈕
      laydate.render({
        elem: '#test23'
        ,btns: ['confirm']
      });
      
      //自定義事件
      laydate.render({
        elem: '#test24'
        ,trigger: 'mousedown'
      });
      
      //點我觸發
      laydate.render({
        elem: '#test25'
        ,eventElem: '#test25-1'
        ,trigger: 'click'
      });
      
      //雙擊我觸發
      lay('#test26-1').on('dblclick', function(){
        laydate.render({
          elem: '#test26'
          ,show: true
          ,closeStop: '#test26-1'
        });
      });
      
      //日期只讀
      laydate.render({
        elem: '#test27'
        ,trigger: 'click'
      });
      
      //非input元素
      laydate.render({
        elem: '#test28'
      }); 
              
      //墨綠主題
      laydate.render({
        elem: '#test29'
        ,theme: 'molv'
      });
      
      //自定義顏色
      laydate.render({
        elem: '#test30'
        ,theme: '#393D49'
      });
      
      //格子主題
      laydate.render({
        elem: '#test31'
        ,theme: 'grid'
      });
              
      //直接嵌套顯示
      laydate.render({
        elem: '#test-n1'
        ,position: 'static'
      });
      laydate.render({
        elem: '#test-n2'
        ,position: 'static'
        ,lang: 'en'
      });
      laydate.render({
        elem: '#test-n3'
        ,type: 'month'
        ,position: 'static'
      });
      laydate.render({
        elem: '#test-n4'
        ,type: 'time'
        ,position: 'static'
      }); 
              

      倘若 layDate 于你有益,歡迎:

      小額贊賞
      亚洲图色