9 款样式华丽的 jQuery 日期选择和日历控件

现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这9款日期选择控件,漂亮的UI外观加上人性化的操作设计,大大提高了用户体验,让我们一起来欣赏一下吧。

1、HTML5移动端外观时尚的日期时间选择控件

之前我们介绍过很多基于jQuery的日期时间选择控件,比如这款基于Bootstrap和jQuery的日历控件和日期选择插件。今天我们要分享一款基于HTML5的移动端日期时间选择控件,它的外观比较特别,适合移动设备中使用,当然PC端用起来也非常不错。

在线演示 (http://www.html5tricks.com/demo/html5-mobile-datetime-picker/index.html) / 源码下载(http://www.html5tricks.com/html5-mobile-datetime-picker.html)

2、基于Bootstrap和jQuery的日历控件和日期选择插件

这次我们要来分享一款漂亮而且实用的jQuery日历控件和日期选择插件,而且这款日历控件是基于Boostrap的,外观还不错。控件有两种模式,一种是日历模式,可以快速定位年份和月份,很方便。另一种是日期选择模式,单击输入框即可弹出日期选择控件,并且支持格式化日期。

在线演示 (http://www.html5tricks.com/demo/jquery-bootstrap-calendar/index.html) / 源码下载(http://www.html5tricks.com/jquery-bootstrap-calendar.html)

3、jQuery/CSS3带数字时钟的圆盘时钟

之前我们分享过很多基于jQuery和CSS3的时钟插件了,有数字时钟,比如这款CSS3倒计时时钟动画,也有一些圆盘时钟,比如这款HTML5仿Apple Watch时钟动画HTML5 SVG圆盘时钟动画 5种时钟样式。今天要介绍的这款时钟插件是数字时钟和圆盘时钟的混合,也就是在圆盘时钟上嵌入了一个数字时钟,更加美观和实用。

在线演示 (http://www.html5tricks.com/demo/jquery-css3-digit-circle-clock/index.html) / 源码下载(http://www.html5tricks.com/jquery-css3-digit-circle-clock.html)

4、jQuery万年历插件 带农历老皇历功能

这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具。同时日历还可以查看本年度的放假安排,功能非常强大。有兴趣的朋友可以下载学习。

在线演示 (http://www.html5tricks.com/demo/jquery-lunar-calendar/index.html) / 源码下载(http://www.html5tricks.com/jquery-lunar-calendar.html)

5、基于Bootstrap的日期选择控件 可选择多种日期格式

这次要介绍的日期选择控件是基于Bootstrap风格的,可支持多种日期合适,并且外观也非常清爽。

在线演示 (http://www.html5tricks.com/demo/bootstrap-datepicker/index.html) / 源码下载(http://www.html5tricks.com/bootstrap-datepicker.html)

6、HTML5/CSS3带日期区间的日期选择插件

今天我们来分享一款实用的HTML5/CSS3日期选择插件,这款日期选择插件的外观还是挺清新简易的,但是整体来说还是挺漂亮的。另外,该日期选择插件还有一个最大的特点,那就是可以自定义日期的区间,我们可以快速的制定区间范围内的日期,非常方便。

在线演示(http://www.html5tricks.com/demo/html5-date-range-picker/index.html) / 源码下载(http://www.html5tricks.com/html5-date-range-picker.html)

7、jQuery多功能日历插件 带事件记录功能

之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮。今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口,你可以设置事件的描述以及提醒的时间,是一款相对实用的jQuery日历插件。

在线演示 (http://www.html5tricks.com/demo/jquery-calendar-with-event/index.html) / 源码下载(http://www.html5tricks.com/jquery-calendar-with-event.html)

8、jQuery UI 自定义样式的日历控件

今天要给大家带来一款基于jQuery UI的日历控件,这款日历控件的样式是通过自定义过的,显得比较简单轻便。日历可以通过按钮对年份和月份进行前翻和后翻,功能没有那么复杂,可能对一些简单的博客中可以使用这个日历。

在线演示 (http://www.html5tricks.com/demo/jquery-ui-datepicker/index.html) / 源码下载(http://www.html5tricks.com/jquery-ui-datepicker.html)

9、JavaScript日期选择控件Kalendae

今天我们要来分享一款简单而实用的JavaScript日期选择控件,名叫Kalendae。它的外观虽然很普通,但是功能很强大,不仅可以当日历组件,也可以当做日期选择控件。而且可以同时展示多个日期选择控件,效果非常不错。

在线演示(http://www.html5tricks.com/demo/Kalendae/index.html) / 源码下载(http://www.html5tricks.com/javascript-kalendae.html)

以上就是9 款样式华丽的 jQuery 日期选择和日历控件,希望会对你有所帮助。

原文发布于微信公众号 - java一日一条(mjx_java)

原文发表时间:2016-10-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程直播室

源码发布:一个Angular写得Markdown编辑器 参考资料

17720
来自专栏DannyHoo的专栏

改变UITextField的光标颜色

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

21420
来自专栏拂晓风起

【H5动画】谈谈canvas动画的闪烁问题

42830
来自专栏姬小光

姬小光前端兴趣班【第010期】- 浏览器开发工具

前面几期我们学习了切图大法,我相信只要你认真学完,就可以立即派上用场。比如可以将你喜欢的图片切成个人主页,也可以将贺卡图片做成带链接的邮件等等。

9420
来自专栏IMWeb前端团队

移动端重构实战系列3——各种等分

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

1.2K70
来自专栏练小习的专栏

用TAOBAO的方法隐藏多余的线条

偶然的看到了TAOBAO UED团队的BLOG,在上面看到了篇文章,说的是怎么隐藏导航最后一项的竖线 1、类目之间的横竖线 ? 从很久很久以前开始,类目间的竖线...

204100
来自专栏腾讯社交用户体验设计

H5动画开发快车道 - AnimateCC与createjs开发实践

92730
来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

35980
来自专栏腾讯Bugly的专栏

通往全栈工程师的捷径 —— React

首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React...

375100
来自专栏大前端开发

微信小程序之生成图片分享

通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径。小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该...

83330

扫码关注云+社区

领取腾讯云代金券