当前位置: 首页 > 编程笔记 >

javascript特殊日历控件分享

白宏大
2023-03-14
本文向大家介绍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()

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

 类似资料:
  • 本文向大家介绍日历控件和天气使用分享,包括了日历控件和天气使用分享的使用技巧和注意事项,需要的朋友参考一下 感谢气象局的天气预报: <iframe allowtransparency="true" frameborder="0" width="292" height="98" scrolling="no" src="http://tianqi.2345.com/plugin/widget/inde

  • 本文向大家介绍原生js制作日历控件实例分享,包括了原生js制作日历控件实例分享的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: 希望本文所述对大家学习javascript程序设计有所帮助。

  • 本文向大家介绍BootStrap daterangepicker 双日历控件,包括了BootStrap daterangepicker 双日历控件的使用技巧和注意事项,需要的朋友参考一下 bootstrap-daterangepicker点击下载 需要bootstrap跟jquery的支持。 实例代码: 实例图片: 参数说明: 其中有一个小需求调整,当我们直接使用源码选择时,为啦方便用户操作,控件

  • 本文向大家介绍ASP.NET中日历控件和JS版日历控件的使用方法(第5节),包括了ASP.NET中日历控件和JS版日历控件的使用方法(第5节)的使用技巧和注意事项,需要的朋友参考一下 今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1、添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天、一周或整个

  • 本文向大家介绍BootStrap的双日历时间控件使用,包括了BootStrap的双日历时间控件使用的使用技巧和注意事项,需要的朋友参考一下 这段时间看了下bootstrap的时间控件,发现使用起来还是很简单的,趁着有时间的时候整理了一下,方便自己以后忘记的时候查阅。。。 废话不多说先上效果图              接下来是代码实现 第一步当然是导入css、js之类的文件啦  第二部是html文

  • 我用的是Flutter,firestore和台历。 这是我的代码,目前工作,但有一个小故障 这是我的转换地图 打印的结果是漂亮的这个。 I/flutter(1655):添加事件:deuxio I/flutter(1655):添加事件:PremierVraiTest I/flutter(1655):添加事件:测试I/flutter(1655):{2020-09-17 13:00:00.000:[事件