DDR爱好者之家 Design By 杰米

本文为大家分享了一个炫酷的js日历控件,供大家参考,具体内容如下

引用JSLit.js 下载 JSLite.io,兼容 JSLite 和 jQuery

javascript特殊日历控件分享

javascript特殊日历控件分享

安装方法

页面引用 JSLite 或者jQuery

<div id="JSLiteCalenbar4"><input type="text"></div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/JSLite.js">

扩展方法

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米