国产精品va在线观看入口,国产精品成人H片在线看,成人国产99视频在线观看

下載 layDate 后，將文件夾 laydate 整個放置在您的項目任意目錄，使用時只需引入 laydate.js 即可。以下是一個入門示例：

小試牛刀
查看代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 layDate 獨(dú)立版</title>
</head>
<body>
<input type="text" id="demoTest">
<script src="laydate/laydate.js"></script> <!-- 改成你的路徑 -->
<script>
//執(zhí)行一個laydate實(shí)例
laydate.render({
  elem: '#demoTest' //指定元素
});
</script>
</body>
</html>

注意：如果你的頁面已經(jīng)使用了 layui，那么你直接采用 layui 內(nèi)置的 laydate 模塊即可，無需再重復(fù)引用獨(dú)立版的 laydate.js

layDate 采用原生 JavaScript 編寫，不依賴任何第三方庫，兼容所有瀏覽器（IE6/7除外）

npm 安裝：npm install layui-laydate

再試牛刀

常規(guī)用法
查看代碼

中文版

國際版

//常規(guī)用法
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'
  //設(shè)置開始日期、日期日期的 input 選擇器
  //數(shù)組格式為 5.3.0 開始新增，之前版本直接配置 true 或任意分割字符即可
  ,range: ['#test-startDate-1', '#test-endDate-1']
});

//年范圍
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點(diǎn)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秒'
});

公歷節(jié)日和自定義重要日子
查看代碼

開啟公歷節(jié)日

自定義重要日

//開啟公歷節(jié)日
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': '' //如果為空字符，則默認(rèn)顯示數(shù)字+徽章
    ,'2099-10-14': '呵呵'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //點(diǎn)擊2017年8月15日，彈出提示語
      alert('這一天是：中國人民抗日戰(zhàn)爭勝利72周年');
    }
  }
});

控制可選的日期與時間
查看代碼

限定可選日期

前后若干天可選

限定可選時間

以9:30-17:30為例

//限定可選日期
var ins22 = laydate.render({
  elem: '#test-limit1'
  ,min: '2016-10-14'
  ,max: '2080-10-14'
  ,ready: function(){
    ins22.hint('日期可選值設(shè)定在 <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'
  });
});

其它功能示例
查看代碼

初始賦值

選中后的回調(diào)

日期切換的回調(diào)

不出現(xiàn)底部欄

只出現(xiàn)確定按鈕

自定義事件

點(diǎn)我觸發(fā)

雙擊我觸發(fā)

日期只讀

非input元素

//初始賦值
laydate.render({
  elem: '#test19'
  ,value: '1989-10-14'
});

//選中后的回調(diào)
laydate.render({
  elem: '#test20'
  ,done: function(value, date){
    alert('你選擇的日期是：' + value + '\n獲得的對象是' + JSON.stringify(date));
  }
});

//日期切換的回調(diào)
laydate.render({
  elem: '#test21'
  ,change: function(value, date){
    alert('你選擇的日期是：' + value + '\n\n獲得的對象是' + JSON.stringify(date));
  }
});

//不出現(xiàn)底部欄
laydate.render({
  elem: '#test22'
  ,showBottom: false
});

//只出現(xiàn)確定按鈕
laydate.render({
  elem: '#test23'
  ,btns: ['confirm']
});

//自定義事件
laydate.render({
  elem: '#test24'
  ,trigger: 'mousedown'
});

//點(diǎn)我觸發(fā)
laydate.render({
  elem: '#test25'
  ,eventElem: '#test25-1'
  ,trigger: 'click'
});

//雙擊我觸發(fā)
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 于你有益，歡迎：

小額贊賞

layDate 日期與時間組件