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 相关文章推荐
js函数调用常用方法详解
Dec 03 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
VUE安装使用教程详解
Jun 03 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
写一个方法1000的阶乘
2012/11/21 面试题
Linux的文件类型
2016/07/05 面试题
签约仪式主持词
2014/03/19 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
redis 解决库存并发问题实现数量控制
2022/04/08 Redis