一款被廣泛使用的高級 Web 日歷組件,完全開(kāi)源無(wú)償且顏值與功能兼備,足以應對日期相關(guān)的各種業(yè)務(wù)場(chǎng)景
下載 layDate 后,將文件夾 laydate 整個(gè)放置在您的項目任意目錄,使用時(shí)只需引入 laydate.js 即可。以下是一個(gè)入門(mén)示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 layDate 獨立版</title>
</head>
<body>
<input type="text" id="demoTest">
<script src="laydate/laydate.js"></script> <!-- 改成你的路徑 -->
<script>
//執行一個(gè)laydate實(shí)例
laydate.render({
elem: '#demoTest' //指定元素
});
</script>
</body>
</html>
- 注意:如果你的頁(yè)面已經(jīng)使用了 layui,那么你直接采用 layui 內置的 laydate 模塊即可,無(wú)需再重復引用獨立版的 laydate.js
- layDate 采用原生 JavaScript 編寫(xiě),不依賴(lài)任何第三方庫,兼容所有瀏覽器(IE6/7除外)
- npm 安裝:npm install layui-laydate
//常規用法
laydate.render({
elem: '#test1'
});
//國際版
laydate.render({
elem: '#test1-1'
,lang: 'en'
});
//年選擇器
laydate.render({
elem: '#test2'
,type: 'year'
});
//年月選擇器
laydate.render({
elem: '#test3'
,type: 'month'
});
//時(shí)間選擇器
laydate.render({
elem: '#test4'
,type: 'time'
});
//時(shí)間選擇器
laydate.render({
elem: '#test5'
,type: 'datetime'
});
//日期范圍
laydate.render({
elem: '#test6'
//設置開(kāi)始日期、日期日期的 input 選擇器
//數組格式為 5.3.0 開(kāi)始新增,之前版本直接配置 true 或任意分割字符即可
,range: ['#test-startDate-1', '#test-endDate-1']
});
//年范圍
laydate.render({
elem: '#test7'
,type: 'year'
,range: true
});
//年月范圍
laydate.render({
elem: '#test8'
,type: 'month'
,range: true
});
//時(shí)間范圍
laydate.render({
elem: '#test9'
,type: 'time'
,range: true
});
//日期時(shí)間范圍
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時(shí)m分s秒'
});
//開(kāi)啟公歷節日
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){ //點(diǎn)擊2017年8月15日,彈出提示語(yǔ)
alert('這一天是:中國人民抗日戰爭勝利72周年');
}
}
});
//限定可選日期
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
});
//限定可選時(shí)間
laydate.render({
elem: '#test-limit3'
,type: 'time'
,min: '09:30:00'
,max: '17:30:00'
,btns: ['clear', 'confirm']
});
//同時(shí)綁定多個(gè)
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'
});
//點(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 于你有益,歡迎:
小額贊賞