<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate快速使用</title>
<link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
<div class="layui-inline"> <!-- 注意：這一層元素并不是必須的 -->
<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
</div>
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//執(zhí)行一個laydate實(shí)例
laydate.render({
elem: '#test1' //指定元素
, type: 'datetime'
// , range: true //或者 range: '~' 來自定義分隔符
// ,value: new Date() //value默認(rèn)初始值為當(dāng)前時間
// ,isInitValue: true //是否默認(rèn)允初始值,默認(rèn)為true
, min: '2017-8-11 12:30:00' //日期時間有效范圍的設(shè)定:
, max: '2119-8-18 12:30:00' //日期時間有效范圍的設(shè)定:
// ,trigger: 'focus' //采用 click彈出
, zIndex: 99999999 //層疊順序
,showBottom: true //是否顯示的底部欄
,btns:['clear', 'now', 'confirm'] //btns 工具按鈕
,lang: 'cn' //lang- 語言 cn（中文版）、en（國際版，即英文版）。
,theme: 'molv' //主題顏色
,calendar: true //允許顯示公里節(jié)日
,mark: {
'0-10-14': '生日'
,'0-12-31': '跨年' //每年12月31日
,'0-0-10': '工資' //每個月10號
,'2019-8-15': '' //具體日期
,'2019-8-20': '預(yù)發(fā)' //如果為空字符，則默認(rèn)顯示數(shù)字+徽章
,'2019-8-21': '發(fā)布'
});
,ready:function (date) {
console.log(date);// 得到初始化的日期時間對象
}
,change: function(value, date, endDate){
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期時間對象：{ipt>
</body>
</html>
type - 控件選擇類型
類型：String，默認(rèn)值：date
用于單獨(dú)提供不同的選擇器類型，可選值如下表：
//年選擇器
laydate.render({
elem: '#test'
,type: 'year'
});
//年月選擇器
laydate.render({
elem: '#test'
,type: 'month'
});
//日期選擇器
laydate.render({
elem: '#test'
//,type: 'date' //默認(rèn)，可不填
});
//時間選擇器
laydate.render({
elem: '#test'
,type: 'time'
});
//日期時間選擇器
laydate.render({
elem: '#test'
,type: 'datetime'
});
range - 開啟左右面板范圍選擇
類型：Boolean/String，默認(rèn)值：false
如果設(shè)置 true，將默認(rèn)采用 “ - ” 分割。 你也可以直接設(shè)置 分割字符。五種選擇器類型均支持左右面板的范圍選擇。
//年范圍選擇
laydate.render({
elem: '#test'
,type: 'year'
,range: true //或 range: '~' 來自定義分割字符
});
//年月范圍選擇
laydate.render({
elem: '#test'
,type: 'month'
,range: true //或 range: '~' 來自定義分割字符
});
//日期范圍選擇
laydate.render({
elem: '#test'
,range: true //或 range: '~' 來自定義分割字符
});
//時間范圍選擇
laydate.render({
elem: '#test'
,type: 'time'
,range: true //或 range: '~' 來自定義分割字符
});
//日期時間范圍選擇
laydate.render({
elem: '#test'
,type: 'datetime'
,range: true //或 range: '~' 來自定義分割字符
});
format - 自定義格式
類型：String，默認(rèn)值：yyyy-MM-dd
通過日期時間各自的格式符和長度，來設(shè)定一個你所需要的日期格式。layDate 支持的格式如下：
格式符 說明
yyyy 年份，至少四位數(shù)。如果不足四位，則前面補(bǔ)零
y 年份，不限制位數(shù)，即不管年份多少位，前面均不補(bǔ)零
MM 月份，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
M 月份，允許一位數(shù)。
dd 日期，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
d 日期，允許一位數(shù)。
HH 小時，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
H 小時，允許一位數(shù)。
mm 分鐘，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
m 分鐘，允許一位數(shù)。
ss 秒數(shù)，至少兩位數(shù)。如果不足兩位，則前面補(bǔ)零。
s 秒數(shù)，允許一位數(shù)。
通過上述不同的格式符組合成一段日期時間字符串，可任意排版，如下所示：
格式 示例值
yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08
yyyy年MM月dd日 HH時mm分ss秒 2017年08月18日 20時08分08秒
yyyyMMdd 20170818
dd/MM/yyyy 18/08/2017
yyyy年M月 2017年8月
M月d日 8月18日
北京時間：HH點(diǎn)mm分 北京時間：20點(diǎn)08分
yyyy年的M月某天晚上，大概H點(diǎn) 2017年的8月某天晚上，大概20點(diǎn)
//自定義日期格式
laydate.render({
elem: '#test'
,format: 'yyyy年MM月dd日' //可任意組合
});
```
#value - 初始值
類型：String，默認(rèn)值：new Date()
支持傳入符合format參數(shù)設(shè)定的日期格式字符，或者 new Date()
//傳入符合format格式的字符給初始值
laydate.render({
elem: '#test'
,value: '2018-08-18' //必須遵循format參數(shù)設(shè)定的格式
});
//傳入Date對象給初始值
laydate.render({
elem: '#test'
,value: new Date(1534766888000) //參數(shù)即為：2018-08-20 20:08:08 的時間戳
});
isInitValue - 初始值填充
類型：Boolean，默認(rèn)值：true
用于控制是否自動向元素填充初始值（需配合 value 參數(shù)使用）
laydate.render({
elem: '#test'
,value: '2017-09-10'
,isInitValue: false //是否允許填充初始值，默認(rèn)為 true
});
min/max - 最小/大范圍內(nèi)的日期時間值
類型：string，默認(rèn)值：min: '1900-1-1'、max: '2099-12-31'
設(shè)定有限范圍內(nèi)的日期或時間值，不在范圍內(nèi)的將不可選中。這兩個參數(shù)的賦值非常靈活，主要有以下幾種情況：
- 如果值為字符類型，則：年月日必須用 -（中劃線）分割、時分秒必須用 :（半角冒號）號分割。這里并非遵循 format 設(shè)定的格式
- 如果值為整數(shù)類型，且數(shù)字＜86400000，則數(shù)字代表天數(shù)，如：min: -7，即代表最小日期在7天前，正數(shù)代表若干天后
- 如果值為整數(shù)類型，且數(shù)字 ≥ 86400000，則數(shù)字代表時間戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日
//日期有效范圍只限定在：2017年
laydate.render({
elem: '#test'
,min: '2017-1-1'
,max: '2017-12-31'
});
//日期有效范圍限定在：過去一周到未來一周
laydate.render({
elem: '#test'
,min: -7 //7天前
,max: 7 //7天后
});
//日期時間有效范圍的設(shè)定:
laydate.render({
elem: '#test'
,type: 'datetime'
,min: '2017-8-11 12:30:00'
,max: '2017-8-18 12:30:00'
});
//時間有效范圍設(shè)定在: 上午九點(diǎn)半到下午五點(diǎn)半
laydate.render({
elem: '#test'
,type: 'time'
,min: '09:30:00'
,max: '17:30:00'
});
```
position - 定位方式
類型：String，默認(rèn)值：absolute
用于設(shè)定控件的定位方式，有以下三種可選值：
position 可選值 說明
abolute 絕對定位，始終吸附在綁定元素周圍。默認(rèn)值
fixed 固定定位，初始吸附在綁定元素周圍，不隨瀏覽器滾動條所左右。一般用于在固定定位的彈層中使用。
static 靜態(tài)定位，控件將直接嵌套在指定容器中。
注意：請勿與 show 參數(shù)的概念搞混淆。show為 true 時，控件仍然是采用絕對或固定定位。而這里是直接嵌套顯示
【HTML】
<span id="testView"></span>
<div id="test2"></div>
【JS】:
//嵌套在指定容器中
laydate.render({
elem: '#test2'
,position: 'static'
,change: function(value, date){ //監(jiān)聽日期被切換
lay('#testView').html(value);
}
});
zIndex - 層疊順序
類型：Number，默認(rèn)值：66666666
一般用于解決與其它元素的互相被遮掩的問題。如果 position 參數(shù)設(shè)為 static 時，該參數(shù)無效。
//設(shè)定控件的層疊順序
laydate.render({
elem: '#test'
,zIndex: 99999999
});
showBottom - 是否顯示底部欄
類型：Boolean，默認(rèn)值：true
如果設(shè)置 false，將不會顯示控件的底部欄區(qū)域
//不顯示底部欄
laydate.render({
elem: '#test'
,showBottom: false
});
btns - 工具按鈕
類型：Array，默認(rèn)值：['clear', 'now', 'confirm']
右下角顯示的按鈕，會按照數(shù)組順序排列，內(nèi)置可識別的值有：clear、now、confirm
//只顯示清空和確認(rèn)
laydate.render({
elem: '#test'
,btns: ['clear', 'confirm']
});
```
#lang - 語言
類型：String，默認(rèn)值：cn
我們內(nèi)置了兩種語言版本：cn（中文版）、en（國際版，即英文版）。這里并沒有開放自定義文字，是為了避免繁瑣的配置。
//國際版
laydate.render({
elem: '#test'
,lang: 'en'
});
```
theme - 主題
類型：String，默認(rèn)值：default
我們內(nèi)置了多種主題，theme的可選值有：default（默認(rèn)簡約）、molv（墨綠背景）、#顏色值（自定義顏色背景）、grid（格子主題）
//墨綠背景主題
laydate.render({
elem: '#test'
,theme: 'molv'
});
//自定義背景色主題 - 非常實(shí)用
laydate.render({
elem: '#test'
,theme: '#393D49'
});
//格子主題
laydate.render({
elem: '#test'
,theme: 'grid'
});
另外，你還可以傳入其它字符，如：theme: 'xxx'，那么控件將會多出一個 class="laydate-theme-xxx" 的CSS類，以便于你單獨(dú)定制主題。
calendar - 是否顯示公歷節(jié)日
類型：Boolean，默認(rèn)值：false
我們內(nèi)置了一些我國通用的公歷重要節(jié)日，通過設(shè)置 true 來開啟。國際版不會顯示。
//允許顯示公歷節(jié)日
laydate.render({
elem: '#test'
,calendar: true
});
# mark - 標(biāo)注重要日子
類型：Object，默認(rèn)值：無
calendar 參數(shù)所代表的公歷節(jié)日更多情況下是一個擺設(shè)。因此，我們還需要自定義標(biāo)注重要日子，比如結(jié)婚紀(jì)念日？日程等？它分為以下兩種：
標(biāo)注 格式 說明
每年的日期 {'0-9-18': '國恥'} 0 即代表每一年
每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
特定的日期 {'2017-8-21': '發(fā)布') -
//標(biāo)注重要日子
var ins1 = laydate.render({
elem: '#test'
,mark: {
'0-10-14': '生日'
,'0-12-31': '跨年' //每年12月31日
,'0-0-10': '工資' //每個月10號
,'2017-8-15': '' //具體日期
,'2017-8-20': '預(yù)發(fā)' //如果為空字符，則默認(rèn)顯示數(shù)字+徽章
,'2017-8-21': '發(fā)布'
}
,done: function(value, date){
if(date.year === 2017 && date.month === 8 && date.date === 15){ //點(diǎn)擊2017年8月15日，彈出提示語
ins1.hint('中國人民抗日戰(zhàn)爭勝利72周年');
}
}
});
控件初始打開的回調(diào)
控件在打開時觸發(fā)，回調(diào)返回一個參數(shù)：初始的日期時間對象
laydate.render({
elem: '#test'
,ready: function(date){
console.log(date); //得到初始的日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
}
});
```
日期時間被切換后的回調(diào)
年月日時間被切換時都會觸發(fā)。回調(diào)返回三個參數(shù)，分別代表：生成的值、日期時間對象、結(jié)束的日期時間對象
laydate.render({
elem: '#test'
,change: function(value, date, endDate){
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得結(jié)束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。
}
});
控件選擇完畢后的回調(diào)
點(diǎn)擊日期、清空、現(xiàn)在、確定均會觸發(fā)?；卣{(diào)返回三個參數(shù)，分別代表：生成的值、日期時間對象、結(jié)束的日期時間對象
laydate.render({
elem: '#test'
,done: function(value, date, endDate){
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得結(jié)束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate快速使用</title>
<link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
<div class="layui-inline"> <!-- 注意：這一層元素并不是必須的 -->
<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
</div>
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//執(zhí)行一個laydate實(shí)例
laydate.render({
elem: '#test1' //指定元素
,type: 'datetime' //日期選擇時間器
});
});
</script>
</body>
</html>
