javascript特殊日曆控制項分享_javascript技巧

本文為大家分享了一個炫酷的js日曆控制項，供大家參考，具體內容如下

引用JSLit.js 下載 JSLite.io，相容 JSLite 和 jQuery

安裝方法

頁面引用 JSLite 或者jQuery

<div id="JSLiteCalenbar4"><input type="text"></div><script type="text/javascript" src="../JSLite.js"></script><script type="text/javascript" src="JSLite.Calendar.js"></script><script type="text/javascript"> var obj4 = document.getElementById("JSLiteCalenbar4") var cal=new $.calendar($("#JSLiteCalenbar4")[0],function(date){  console.log(date);  //返回更改的時間值date=2014-10-11  $('#JSLiteCalenbar4 input').val()  this.calBoxs.prev().val(date) }) .hide() .time("yyyy/MM月dd日 hh:mm:ss",'default') console.log(cal);</script>

擴充方法

• hidePrevBtn:隱藏上一頁 按鈕 顯示未來時間，不能翻閱曆史
• hide:點擊顯示介面
• setDate:設定時間，傳json
• time:設定是否可以選則時間 (時分) "yyyy/MM月dd日 hh:mm:ss" 序號時間格式 'default' 預設再input中顯示預設時間或者指定時間

hide

點擊顯示介面

<div id="JSLiteCalenbar2"><div class="">點擊顯示</div></div><script type="text/javascript"> var obj3 = document.getElementById("JSLiteCalenbar2") new $.calendar(obj3,{  "now":"2014-09-15" },function(date){  //返回更改的時間值date=2014-10-11  console.log(date) }).hide();</script>

例子一

var obj3 = document.getElementById("JSLiteCalenbar2")new JSLite.calendar(obj3,{ "now":"2014-09-15"},function(date){ //返回更改的時間值date=2014-10-11 console.log(date) console.log("obj3")}).time("yyyy/MM月dd日 hh:mm:ss",'default');var cal = new JSLite.calendar(obj,function(){ return {  "now":"2014-09-15",//伺服器目前時間  "change":true,//是否更改目前時間以前的內容  "interfaceNum":3,//顯示當前以後多少個日曆  "workdate":[   {    "date":"2013-12",    "day":["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "20"]    },{    "date":"2014-09",    "day":["10", "2", "3", "4", "5", "6", "20"]    },{    "date":"2014-05",    "day":["10", "2", "3", "4", "5", "6", "20"]    },{    "date":"2014-10",    "day":["12", "2", "3", "4", "5", "6", "20"]    }  ] }},function(date){ //返回更改的時間值date=["2014-10-10,0","2014-10-11,0"] console.log(date)}).hidePrevBtn()

例子二

var obj3 = document.getElementById("JSLiteCalenbar2")new JSLite.calendar(obj3,function(date){ //返回更改的時間值date=2014-10-11 console.log(date) console.log("obj3")}).hidePrevBtn().hide()

以上就是本文的全部內容，希望對大家的學習有所協助。