javascript特殊日历控件分享

 更新时间:2016年03月07日 11:07:39   投稿:lijiao  
这篇文章主要为大家详细介绍了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()

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

相关文章

  • js日期格式化yyyy-MM-dd问题

    js日期格式化yyyy-MM-dd问题

    这篇文章主要介绍了js日期格式化yyyy-MM-dd问题,具有很好的参考价值,希望对大家大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • javascript设计模式 – 职责链模式原理与用法实例分析

    javascript设计模式 – 职责链模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 职责链模式,结合实例形式分析了javascript职责链模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 基于VSCode调试网页JavaScript代码过程详解

    基于VSCode调试网页JavaScript代码过程详解

    这篇文章主要介绍了基于VSCode调试网页JavaScript代码过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 微信小程序class封装http代码实例

    微信小程序class封装http代码实例

    这篇文章主要介绍了微信小程序class封装http,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • js实现旋转木马轮播图效果

    js实现旋转木马轮播图效果

    这篇文章主要为大家详细介绍了js实现旋转木马轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 前端强制刷新、清空缓存各种方法总结

    前端强制刷新、清空缓存各种方法总结

    这篇文章主要介绍了在遇到数据或逻辑未成功更新问题时,如何通过刷新页面、设置、清除缓存等方法进行解决,文中通过图文将各种情况下清空缓存的方案介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • Javascript排序算法之计数排序的实例

    Javascript排序算法之计数排序的实例

    计数排序是一种高效的线性排序,它通过计算一个集合中元素楚翔的次数来确定集合如何排列,计数排序不需要进行数据的比较,所有他的运行效率前面介绍的都高
    2014-04-04
  • JS实现水平移动与垂直移动动画

    JS实现水平移动与垂直移动动画

    这篇文章主要为大家详细介绍了JS实现水平移动与垂直移动动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JavaScript实现图片懒加载的三种常用方法总结

    JavaScript实现图片懒加载的三种常用方法总结

    懒加载是一种对网页性能优化的方式,也是我们经常会用到的技术,这篇文章为大家整理了JavaScript实现图片懒加载的三种常用方法,希望对大家有所帮助
    2023-06-06
  • JS对象深度克隆实例分析

    JS对象深度克隆实例分析

    这篇文章主要介绍了JS对象深度克隆,结合实例形式分析了JavaScript对象深度克隆的实现方法与相关注意事项,需要的朋友可以参考下
    2017-03-03

最新评论