在工作中恰力，我們難免會用到日歷插件叉谜，我一般喜歡用layDate，因為它屬性多踩萎，設(shè)置方便停局，還有回調(diào)函數(shù)可以自定義邏輯處理，挺不錯的香府，現(xiàn)在我們就學(xué)習(xí)使用它~
html頁面代碼：
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>js layDate日歷控件代碼 – 網(wǎng)站源碼</title>
<script src=”laydate/laydate.js”></script>
</head>
<body>
<div>
演示一：<input onclick=”laydate()”><br /><br />
演示二：<input id=”demo” value=”2014-6-20發(fā)布日”>
</div>
<script>
;!function(){
laydate({
elem: ‘#demo’
})
}();
</script>
</body>
</html>
效果如下
點擊文本框董栽，效果如下
現(xiàn)在我們說說具體的使用方法步驟：
首先加載那個js進來，在頭部那里加載企孩，然后給你的文本框加個onclick=”laydate()”就行了裆泳，如下
然后我想換個樣式，在頁面中頭部或者尾部添加下面的代碼柠硕，如下
<script>
laydate.skin(‘danlan’);
</script>
Danlan就是樣式名稱工禾，有哪些樣式，看看我們的skins文件夾就知道了蝗柔，如下
更多方法如下
一闻葵、核心方法：laydate(options);
options是一個對象，它包含了以下key: ‘默認值’
elem: ‘#id’, //需顯示日期的元素選擇器
event: ‘click’, //觸發(fā)事件
format: ‘YYYY-MM-DD hh:mm:ss’, //日期格式
istime: false, //是否開啟時間選擇
isclear: true, //是否顯示清空
istoday: true, //是否顯示今天
issure: true, 是否顯示確認
festival: true //是否顯示節(jié)日
min: ‘1900-01-01 00:00:00’, //最小日期
max: ‘2099-12-31 23:59:59’, //最大日期
start: ‘2014-6-15 23:00:00’, //開始日期
fixed: false, //是否固定在可視區(qū)域
zIndex: 99999999, //css z-index
choose: function(dates){ //選擇好日期的回調(diào)
}
二癣丧、其它方法/屬性
laydate.v //獲取laydate版本號
laydate.skin(lib); //加載皮膚槽畔，參數(shù)lib為皮膚名
/*
layer.now支持多類型參數(shù)。timestamp可以是前后若干天胁编，也可以是一個時間戳厢钧。format為日期格式，為空時則采用默認的“-”分割嬉橙。
如laydate.now(-2)將返回前天早直，laydate.now(3999634079890)將返回2096-09-28
*/
layer.now(timestamp, format); //該方法提供了豐富的功能，推薦靈活使用市框。
laydate.reset(); //重設(shè)日歷控件坐標(biāo)霞扬，一般用于頁面dom結(jié)構(gòu)改變時。無參
把點擊的日期發(fā)送給后臺，使用choose屬性喻圃，定義回調(diào)方法萤彩，如下
開始日：<li class=”laydate-icon” id=”start” style=”width:200px; margin-right:10px;”></li>
結(jié)束日：<li class=”laydate-icon” id=”end” style=”width:200px;”></li>
<script>
var start = {
elem: ‘#start’,
format: ‘YYYY/MM/DD hh:mm:ss’,
min: laydate.now(), //設(shè)定最小日期為當(dāng)前日期
max: ‘2099-06-16 23:59:59’, //最大日期
istime: true,
istoday: false,
choose: function(datas){
end.min = datas; //開始日選好后，重置結(jié)束日的最小日期
end.start = datas //將結(jié)束日的初始值設(shè)定為開始日
}
};
var end = {
elem: ‘#end’,
format: ‘YYYY/MM/DD hh:mm:ss’,
min: laydate.now(),
max: ‘2099-06-16 23:59:59’,
istime: true,
istoday: false,
choose: function(datas){
start.max = datas; //結(jié)束日選好后斧拍，重置開始日的最大日期
}
};
laydate(start);
laydate(end);
</script>
