이 기사에서는 참고용으로 멋진 js 캘린더 컨트롤을 공유합니다.
JSLit.js를 참조하여 JSLite 및 jQuery와 호환되는 JSLite.io를 다운로드하세요
설치방법
페이지 참조 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>
확장 방법
숨기기
인터페이스를 보려면 클릭하세요
<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>
예시 1
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()
예시 2
var obj3 = document.getElementById("JSLiteCalenbar2") new JSLite.calendar(obj3,function(date){ //返回更改的时间值date=2014-10-11 console.log(date) console.log("obj3") }).hidePrevBtn().hide()
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.