JQuery 日期選擇框,精確到時分秒類型。

貌似升級了,官方網址:http://www.jemui.com/uidoc/jedate.html

本教程源碼下載:http://download.csdn.net/detail/tmaskboy/9547160
效果圖爲:
這裏寫圖片描述
1.首先引入js文件

<script type="text/javascript" src="jeDate/jedate.js"></script>

2.編寫輸入框

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

請注意此處id值爲dateinfo,下文需要回調該id。

3.編寫js渲染

<script type="text/javascript">
    jeDate({
		dateCell:"#dateinfo",
		format:"YYYY年MM月DD日 hh:mm:ss",
		isinitVal:true,
		isTime:true, //isClear:false,
		minDate:"2014-09-19 00:00:00",
		okfun:function(val){alert(val)}
	})
</script>

具體參數詳解:

dateCell:"#id", //目標元素。由於jedate.js封裝了一個輕量級的選擇器,因此dateCell還允許你傳入class、tag這種方式 ‘#id .class’
isDisplay:false, //是否直接顯示日期層,false不直接顯示,true直接顯示需要displayCell配合
displayCell:"#id", //直接顯示日期層的容器,可以是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, //是否開啓時間選擇
ishmsLimit:false, //時分秒限制
isClear:false, //是否顯示清空
festival:false, //是否顯示節日
zIndex:999, //彈出層的層級高度
marks:null, //給日期做標註
choosefun:function(val) {}, //選中日期後的回調
clearfun:function(val) {}, //清除日期後的回調
okfun:function(val) {} //點擊確定後的回調

4.擴展
設置只能選擇當前時間之後的日期
添加js函數,獲取當前的日期時間 格式“yyyy-MM-dd HH:MM:SS”

function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
}

將3中的minDate改爲minDate:getNowFormatDate(),
即可將之前日期變爲灰色,不可修改。
另外還支持修改皮膚,相關文件和案例代碼請點擊下載:http://download.csdn.net/detail/tmaskboy/9547160

發佈了84 篇原創文章 · 獲贊 53 · 訪問量 30萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章