jquery 時間選擇插件-jedate

　引言

日期選擇插件有很多，今天說一說jedate

　源代碼

• github

快速上手

使用對象

<input class="datainp" id="indate" type="text" placeholder="請選擇"  readonly>
<input class="datainp" id="dateinfo" type="text" placeholder="請選擇"  readonly>

使用方法

<script type="text/javascript">  
jeDate({
    dateCell:"#indate",//isinitVal:true,
    format:"YYYY-MM-DD",
    isTime:false, //isClear:false,
    minDate:"2014-09-19 00:00:00"
})
jeDate({
    dateCell:"#dateinfo",
    isinitVal:true,
    isTime:true, //isClear:false,
    minDate:"2014-09-19 00:00:00"
}) 
</script>

核心方法：jeDate(options)

options是一個對象，它包含了以下key: '默認值'
 dateCell:"#id", //目標元素。由於jedate.js封裝了一個輕量級的選擇器，因此dateCell還允許你傳入class、tag這種方式 '#id .class'
 format:"YYYY-MM-DD hh:mm:ss", //日期格式
 minDate:"1900-01-01 00:00:00", //最小日期
 maxDate:"2099-12-31 23:59:59", //最大日期
 isinitVal:false, //是否初始化時間
 isTime:false, //是否開啓時間選擇
 isClear:true, //是否顯示清空
 festival:false, //是否顯示節日
 zIndex:999,  //彈出層的層級高度
 marks:null, //給日期做標註
 choosefun:function(val) {},  //選中日期後的回調
 clearfun:function(val) {},   //清除日期後的回調
 okfun:function(val) {}       //點擊確定後的回調

【自定義日期格式】

<div id="test1" class="jedate-icon"></div>
<script>
jeDate({
    dateCell: '#test1',
    format: 'YYYY/MM', // 分隔符可以任意定義，該例子表示只顯示年月
    festival: true, //顯示節日
    choose: function(datas){ //選擇日期完畢的回調
        alert('得到：'+datas);
    }
});
</script>

【日期範圍限定在昨天到明天】

<div id="hello3" class="jedate-icon"></div>
<script>
jeDate({
    dateCell: '#hello3',
    minDate: jeDate.now(-1), //0代表今天，-1代表昨天，-2代表前天，以此類推
    maxDate: jeDate.now(1) //1代表明天，2代表後天，以此類推
});
</script>

【圖標或其他按鈕觸發日期】

<input class="datainp" id="datebut" type="text" placeholder="請選擇"  readonly>
<input type="button" onClick="jeDate({dateCell:'#datebut',isTime:true,format:'YYYY-MM-DD hh:mm:ss'})" value="打開">   

============
查看演示

• 查看演示

下載

• jeDate.js

============