JavaScript special calendar control sharing_javascript skills

This article shares a cool js calendar control for your reference. The specific content is as follows

Refer to JSLit.js and download JSLite.io, compatible with JSLite and jQuery

Installation method

Page reference JSLite or 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>

Extension methods

• hidePrevBtn: Hide previous page button Shows future time, cannot browse history
• hide: Click to display the interface
• setDate: set the time, pass json
• time: Set whether the time (hours and minutes) can be selected "yyyy/MM month dd day hh:mm:ss" Serial number time format 'default' By default, the default time or specified time will be displayed in the input

hide

Click to display the interface

<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>

Example 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()

Example 2

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

The above is the entire content of this article, I hope it will be helpful to everyone’s study.