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()

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

相关文章

  • JavaScript Serializer序列化时间处理示例

    JavaScript Serializer序列化时间处理示例

    JavaScriptSerializer序列化时间后会把时间序列化成N进制的鬼数据 ,下面有个示例,需要的朋友可以了解下
    2014-07-07
  • 浅谈JavaScript工具链不完全指南

    浅谈JavaScript工具链不完全指南

    经过这么多年的发展,JavaScript 早已经不是当年那个不太起眼的脚本语言。如今的 JavaScript 可以说是风光无限,在 Web 前端、移动端、服务端甚至物联网设备上都大展身手,到处都有它的身影。
    2021-05-05
  • JavaScript两种axios取消请求方式小结

    JavaScript两种axios取消请求方式小结

    本文主要介绍了JavaScript两种axios取消请求方式小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • 分享一道关于闭包、bind和this的面试题

    分享一道关于闭包、bind和this的面试题

    这篇文章主要给大家介绍了一道关于闭包bind、this的面试题,文中给出了详细的示例代码,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • ESLint详解及在WebStorm中的应用步骤

    ESLint详解及在WebStorm中的应用步骤

    ESLint是一种JavaScript代码检查工具,开发者可以通过自定义规则进行代码风格和质量的控制,使用ESLint的过程包括安装、初始化配置、配置规则、运行ESLint检查代码、与编辑器集成,以及与构建工具集成等,需要的朋友可以参考下
    2024-09-09
  • 使用Echart实现绘制立体的柱状图

    使用Echart实现绘制立体的柱状图

    EChart开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。本文将利用EChart绘制立体的柱状图,感兴趣的可以学习一下
    2022-03-03
  • JS使用eval()动态创建变量的方法

    JS使用eval()动态创建变量的方法

    这篇文章主要介绍了JS使用eval()动态创建变量的方法,详细分析了eval函数的功能及使用eval函数实现动态创建变量的步骤与相关注意事项,需要的朋友可以参考下
    2016-06-06
  • 基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享

    基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享

    基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享,需要的朋友可以参考一下
    2013-06-06
  • javascript和php使用ajax通信传递JSON的实例

    javascript和php使用ajax通信传递JSON的实例

    今天小编就为大家分享一篇javascript和php使用ajax通信传递JSON的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了,感兴趣的朋友跟着脚本之家小编一起学习吧
    2016-10-10

最新评论