标題
開發軟體使用到日期時間控件的地方很多，但是很多時候Html5自帶的時間控件無法滿足開發的需要，是以使用這種時間控件完全沒有問題
引用
很多時候我們開發引用别人的控件時候，發現老是出現錯誤，是因為我們引用出現錯誤，我在使用日期時間控件的時候也出現了這樣的問題 是以檔案一點要放正确，多的浪費，少了要命，請把以下标注的檔案全部放入到引用的檔案夾裡面
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 layDate 獨立版</title>
</head>
<body>
<input type="text" id="test1">
<script src="/laydate/laydate.js"></script> <!-- 改成你的路徑 -->
<script>
//執行一個laydate執行個體
laydate.render({
elem: '#test1' //指定元素
});
</script>
</body>
</html>
基本的時間日期選擇器
代碼
//年選擇器
laydate.render({
elem: '#test2'//input标簽的 Id
,type: 'year'
});
//年月選擇器
laydate.render({
elem: '#test3'
,type: 'month'
});
//時間選擇器
laydate.render({
elem: '#test4'
,type: 'time'
});
//時間選擇器
laydate.render({
elem: '#test5'
,type: 'datetime'
});
日期範圍 時間選擇
代碼
//日期範圍
laydate.render({
elem: '#test6'
,range: true
});
//年範圍
laydate.render({
elem: '#test7'
,type: 'year'
,range: true
});
//年月範圍
laydate.render({
elem: '#test8'
,type: 'month'
,range: true
});
//時間範圍
laydate.render({
elem: '#test9'
,type: 'time'
,range: true
});
//日期時間範圍
laydate.render({
elem: '#test10'
,type: 'datetime'
,range: true
});
其它功能
代碼
//初始指派
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'
});
//點我觸發
laydate.render({
elem: '#test25'
,eventElem: '#test25-1'
,trigger: 'click'
});
//輕按兩下我觸發
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: '#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'
});
控件下載下傳
https://download.csdn.net/download/liyonghewangtao/10647254