javascript特殊日歷控件分享

更新時間：2016年03月07日 11:07:39 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了javascript特殊日歷控件的使用方法，展示了javascript日歷控件實現(xiàn)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了一個炫酷的js日歷控件，供大家參考，具體內(nèi)容如下

引用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:設(shè)置時間，傳json
time:設(shè)置是否可以選則時間 (時分) "yyyy/MM月dd日 hh:mm:ss" 序列號時間格式 'default' 默認(rèn)再input中顯示默認(rèn)時間或者指定時間

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",//服務(wù)器當(dāng)前時間
  "change":true,//是否更改當(dāng)前時間以前的內(nèi)容
  "interfaceNum":3,//顯示當(dāng)前以后多少個日歷
  "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()

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: