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 相关文章推荐
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
Vue中的字符串模板的使用
May 17 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 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
关于文本留言本的分页代码
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
checkbox使用示例
2013/08/23 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
点球小游戏python脚本
2018/05/22 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
英文版餐饮运营管理求职信
2013/11/06 职场文书
九年级语文教学反思
2014/02/04 职场文书
自立自强的名人事例
2014/02/10 职场文书
个人综合鉴定材料
2014/05/23 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
研究生个人学年总结
2015/02/14 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server