javascript特殊日历控件分享


Posted in Javascript onMarch 07, 2016

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

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

javascript特殊日历控件分享

javascript特殊日历控件分享

安装方法

页面引用 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()

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

Javascript 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 #Javascript
论JavaScript模块化编程
Mar 07 #Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 #Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 #Javascript
javascript数组去重小结
Mar 07 #Javascript
详解JS正则replace的使用方法
Mar 06 #Javascript
浅谈javascript中的call、apply、bind
Mar 06 #Javascript
You might like
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
jQuery插件 tabBox实现代码
2010/02/09 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
python opencv人脸检测提取及保存方法
2018/08/03 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python中过滤字符串列表的方法
2020/12/22 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
幼师求职自荐信
2014/05/31 职场文书
横幅标语大全
2014/06/17 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
实习指导教师评语
2014/12/30 职场文书