澳门新葡萄京官网注册 36

Kalendae:JavaScript日期选择和日历控件

澳门新葡萄京官网注册 ,本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

 问题背景:

根据项目要求,为功能页添加时间控件。最初选用的laydate满足需求,所以就一直使用来着。

最初版本采用laydate页面都比较短,没有过滚动条。

这次时间控件所在位置在页面底端,发现,框架内laydate因内部滚动导致控件偏移……

jQuery 时间控件推荐,jQuery时间控件

My97DatePicker 
澳门新葡萄京官网注册 1
My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件。具有强大的日期范围限制功能;自定义事件和丰富的API库;多语言支持和自定义皮肤支持;跨无限级框架显示和自动选择显示位置。
澳门新葡萄京官网注册 2

My97DatePicker

 

澳门新葡萄京官网注册 3 JS
Calendar 
澳门新葡萄京官网注册 4 JS
Calendar是一个支持多种浏览器,多种语言的日历控件。
澳门新葡萄京官网注册 5澳门新葡萄京官网注册 6

JS Calendar

 

澳门新葡萄京官网注册 7 Calendar
Popup  澳门新葡萄京官网注册 8
一个灵活的日期选择控件。
澳门新葡萄京官网注册 9

Calendar Popup

 

澳门新葡萄京官网注册 10 Date
Picker  澳门新葡萄京官网注册 11
Date
Picker一个采用jQuery开发的日期选择控件。支持同时显示多个月份日历,标记特殊日期,易于通过CSS定制外观,自定义周的第一天,自定义月份和星期的显示名称。
澳门新葡萄京官网注册 12

Date Picker

 

澳门新葡萄京官网注册 13 Date
Range Picker 
澳门新葡萄京官网注册 14
基于jQuery UI1.6与jQuery UI CSS框架开发的日期选择控件。
澳门新葡萄京官网注册 15

Date Range Picker

 

澳门新葡萄京官网注册 16 Date-Picker
Widget  澳门新葡萄京官网注册 17
Date-Picker
Widget是一个日期选择控件。支持:多种日期格式;通过CSS自定义外观;让一星期中的某些天失效;让预约日期加亮显示。
澳门新葡萄京官网注册 18

Date-Picker Widget

 

澳门新葡萄京官网注册 19 DateChooser 
澳门新葡萄京官网注册 20
DateChooser是一个轻量级javascript日期选择控件。易于使用,经测试支持IE
6、IE 7 beta 2、Firefox1.0、Firefox
1.5、Opera8、Opera9和Safari等浏览器。
澳门新葡萄京官网注册 21

DateChooser

 

澳门新葡萄京官网注册 22 jQuery.ptTimeSelect 
澳门新葡萄京官网注册 23
jQuery.ptTimeSelect是一个上下午时间选择UI控件。
澳门新葡萄京官网注册 24

jQuery.ptTimeSelect

 

澳门新葡萄京官网注册 25 jQuery
DateInput 
澳门新葡萄京官网注册 26 jQuery
Date
Input是一个简洁,快速,轻量级,漂亮的日期选择控件。DateInput可自定义日期的显示格式,同时支持多种语言包括中文。
澳门新葡萄京官网注册 27

jQuery DateInput

 

澳门新葡萄京官网注册 28 Calender
Eightysix 
澳门新葡萄京官网注册 29

Calender
Eightysix是一个基于MooTools开发的日期选择控件。整个控件只有9.5kb,支持通过CSS定义外观主题(已默认提供三种主题)。支持设置默认日期,日历最大/最小日期,日期格式,按周和按日显示等。
澳门新葡萄京官网注册 30

Calender Eightysix

时间控件推荐,jQuery时间控件
My97DatePicker
My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件。具有强大的日期范围限…

Kalendae是一款完全基于JavaScript的日期选择控件和日历组件,值得一提的是,Kalendae并没有依赖任何第三方的JS脚本库,而是用原生的JavaScript实现了如此功能强大的日期选择控件。

 

Kalendae有以下特点:

  • 完全基于JavaScript,无依赖,无jQuery。
  • 可自定义皮肤,基本不用图片,完全靠CSS文件定制皮肤。
  • 日期选择支持单天,也支持多天区间范围。
  • 自定义展示的日期数字。
  • 可直接放在页面上用作日历控件。
  • 对于选中的日期,可以自定义日期格式。
  • 提供一些常用的日期转换函数。

控件介绍(本段内容来自->传送门) 

澳门新葡萄京官网注册 31

 

 

 

 

 

 

 

 

 

 

 

你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴。她致力于成为全球最用心的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力。她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器。她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用。她遵循LGPL协议,您可以免费将她用于任何个人项目。

选择理由

layDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别,快捷键操作等常规功能外,还拥有更多趋近完美的解决方案。

科学的接口设计1
她并不提倡API的数量性,而是尽可能呈现最人性合理的接口,减少使用成本。

一流的代码驱动2
layDate完全用原生JavaScript实现,代码采用自由灵活风格,内部封装了众多轻量级的方法引擎,保证了良好的速度体验和接近于零的代码冗余.

人性的皮肤体系3
她非常注重外观设计,因此她提供了非常强大的皮肤选择支持,不仅官方会提供海量的皮肤下载,您还可以很方便地按照喜好去自定义皮肤,我们非常欢迎您能够贡献皮肤包,具体操作事宜请查看皮肤库页面。

———这是一条自来水分割线————

 

Kalendae的一些效果图:

澳门新葡萄京官网注册 32

澳门新葡萄京官网注册 33

澳门新葡萄京官网注册 34

正文

我们平时看到的laydate是这个样子的~

澳门新葡萄京官网注册 35

项目是含有上下左右四个框,所以,涉及画面过长时,通常我们看到的滚动条都是在right部分的。这和窗体滚动条是有区别的。

laydate具有良好的稳定性,特别是空间稳定性,它能相对窗体滚动调整位置。但是感受不到框架内部滚动(我尝试过用$(‘#right’).scroll(function(){…})不好使……理论上应该可以?)图如下。

澳门新葡萄京官网注册 36

所以尝试了下面的方式进行修改:

1 HTML
2 <input class="w150 laydate-icon fl" readonly="readonly" id="time" onclick="calShow()" value="{$nowTime}">

 1 JS
 2 //面板显示
 3 function calShow() {$('.laydate_box').css('display','block');}
 4     
 5     ! function() {
 6         laydate.skin('default'); //切换皮肤,请查看skins下面皮肤库
 7         laydate({
 8             elem: '#time',
 9             format: 'YYYY年MM月', // 分隔符可以任意定义,该例子表示只显示年月
10              choose: function(dates){ //选择好日期的回调
11              alert(dates);
12               }
13         }); //绑定元素 
14     }();
15 
16 //面板隐藏
17     var main_con = $(".main_con").scroll(function() {$('.laydate_box').css('display','none')});

 最初想法是固定面板在输入框下面,随right的滚动条移动。未果……

所以修改成,点击的时候弹出面板,保持原功能不变。在鼠标滚动的时候,让面板消失。遇到的问题是,消失之后再次点击,面板出现在第一次点击的位置。依旧偏移……

 找到了laydate的重置面板位置功能——reset(),改写成最后版本:

 1 function calShow() {$('.laydate_box').css('display','block');laydate.reset();}
 2     
 3     ! function() {
 4         laydate.skin('default'); //切换皮肤,请查看skins下面皮肤库
 5         laydate({
 6             elem: '#time',
 7             format: 'YYYY年MM月', // 分隔符可以任意定义,该例子表示只显示年月
 8              choose: function(dates){ //选择好日期的回调
 9              alert(dates);
10               }
11         }); //绑定元素 
12     }();
13 
14     var main_con = $(".main_con").scroll(function() {$('.laydate_box').css('display','none')});

实际上,在我们选择日期的时候,也不会考虑滚来滚去面板是否还在,只要想选择的时候出现就可以。所以,本次修改基本达到了设计目的。


又一个原创文章,给自己赞一个~

这一定还不是最优方法,如果阅读这篇文章有兴趣的朋友可以和我讨论一下~还请赐教嘿嘿

(づ ̄3 ̄)づ╭❤~

如果你觉得本文不错,想要转载,还请希望注明出处~毕竟自己做的不容易~嘿嘿

 

Kalendae使用示例代码:

new Kalendae(document.body, {
    months:1,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

new Kalendae({
    attachTo:document.body,
    months:2,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

new Kalendae({
    attachTo:document.body,
    months:3,
    mode:'single',
    selected:Kalendae.moment().subtract({M:1})
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注