现在位置首页 / 前端开发 /正文

jquery 横向日期时间选择控件推荐

作者: IT小兵 | 2016年2月22日| 热度:℃ | 评论: |参与:

在以前的文章中,分享了很多jquery的选择控件,比如:[好用的jquery移动端触摸滑动选择日期时间控件]

[Jquery/Javascript 日期时间选择控件-时间函数/延迟执行/定时执行等时间相关总结]

[Javacript对Date日期的格式化及转换]

今天给大家推荐2个非常简单实用的日期选择控件。暂时定义名称为:calendar.js,timepage.js。

效果图:

Demo预览地址:http://www.suchso.com/code/calendar/ 

百度网盘源代码下载:链接: http://pan.baidu.com/s/1ntWVSQP   密码: 75hu

原理:

1、

第一个日历控件,条状的日历。


(使用方法:调用initBarTime(id,evn),第一个参数是要渲染div的id,第二个参数是点击日期发生的事件)

html思路分析:
首先我们看出来这个日历分为两个部分
第一部分是上面,整体的你去年月日日期的显示。
第二部分是下面,具体某一天以及星期的日期显示。
第三部分是下面两段的左右箭头,以及滚动功能。

上面年月日部分的日期我们用一个 p 标签来实现。
下面则是用两组ul来实现,并且加入隐藏于用于记录每个日期的具体年月日。
左右箭头我们则是用两个a标签包含特殊样式的span来实现。

js具体实现:
简单的分析一下日历的功能。
1.进入页面首先在最中间一格加载出当天的日期,前后依次递增递减。
2.顶部显示具体年月日显示选中的日期。
3.左右箭头翻页每次跳转一天。
4.点击日期,改变选中日期的样式,改变顶部年月日的文本显示。
现在我们来具体分析一下实现方法。

1.文本赋值方法。(我们需要给下面的7个li根据日期,填写上对应的文本,并且改变样式)。
2.点击日期方法。(点击具体日期,我们根据点击li节点的隐藏域需要改变顶部的日期,并且改变相应样式)。
3.改变选中节点样式方法。(根据顶部显示的选中日期,与li中的隐藏于比较,日期相等的改变选中样式)。
4.获取前一天后一天的方法。
5.前后翻页方法。(根据获取前一天后一天的方法,对中间的li日期进行改变,通过中间的li日期依次递增递减获取其他日期,依次赋值)。


2、(使用方法:initCalendar(id,evn)第一个参数是要渲染div的id,第二个参数是点击日期发生的事件。)

html思路分析
首先我们看出来这个日历分为四部分。
第一部分,最上方的年显示。
第二部分,年显示下面的一行月显示。并且有左右翻页箭头。
第三部分,日历主体显示,显示单月所有日期与每个日期对应的星期。
第四部分,当月选中日期的现实。

第一部分,我们用一个p标签来实现。
第二部分,我们用一个ul来实现,ul两端的箭头用a标签包含特殊样式的span来实现。
第三部分,我们用一个ul来实现,前7个li固定的显示周日到周六。后面的li显示对应的日期。
第四部分,当月选中日期的现实,我们用一个div来实现。
选中日期我们分别用三个隐藏域记录年月日。

js的具体实现:
首先我们来看一下日历所需要的功能。
1.进入页面首先加载当年当月的日历,并且默认选中当天。
2.点击左右翻页箭头一翻翻六个月的月份。
3.点击月份,切换选中月份的日历,并且选中上次选中的日期,若当月没有那个日期则不显示。
4.点击选中具体的日期,最下方的显示跟着一起变动,并且改变相应的选中状态。

js重要方法:
1.初始化时间方法,初始化界面上所有显示的显示的年月日,以及隐藏域的值。
2.画日历方法,每次更改选择月,则需要对应的重新画日历,并且设定选中月。
3.选择日期方法,改变页面上对应选择日期的文本显示。
4.选择月方法,改变对应的选择月份,与选择年份,改变界面上的显示值,改变隐藏域的值。
5.左右翻页切换月份方法,一次点击翻半年,改变月份文本,并且改变对应月份文本的年隐藏域,根据索引改变选择月。


参考:

https://github.com/yfsmooth/calendar 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询