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脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
微信JSSDK上传图片
Aug 23 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
json的使用小结
Jun 08 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
ES6新增的数组知识实例小结
May 23 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP常用处理静态操作类
2015/04/03 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jQuery live
2009/05/15 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
经典演讲稿开场白
2014/08/25 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Apache自带的ab压力测试工具的实现
2022/07/23 Servers