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 于你有益,歡迎:

                    小額贊賞
                    亚洲图色