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 日期选择和日历控件,希望会对你有所帮助。
9 款样式华丽的 jQuery 日期选择和日历控件相关推荐
- android日历控件之显示当前月份,Android 日历方式显示的日期选择组件(日历控件之一).doc...
运行结果: 此Widget组件只包含五个类文件: DateWidget DateWidgetDayCell DateWidgetDayHeader DayStyle SymbolButton *红色为 ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址: http://keleyi.com/a/bjad/e ...
- wpf 日期选择对话窗_WPF 4 日历控件(Calendar)
在之前我已经写过两篇关于WPF 4 任务栏(Taskbar)相关的特性.相信自从VS2010 Beta 版放出后,WPF 的粉丝们肯定在第一时间了解了WPF 4 的一些新控件及新功能.赶在明天Visu ...
- python 自动化 在日历中选择时间-Python中Selenium选择日期(选择日历控件)的方法...
1.日历控件中,年月日,一个一个的点击,灵活性太差,稳定性也差 通过检查元素,日历空间就是一个文本输入框,可以用send_keys 检查元素 2.发现标签中存在readonly属性,这是一个只读标签不 ...
- 推荐一款优雅的日历控件
原文链接:https://mp.weixin.qq.com/s/SmxDiWIidHS2hwVvFcz_hw 项目需要用到日历控件,这是我们的效果图. 去github上搜了一哈,搜到大神写的Calen ...
- element-ui calendar 日历控件实现编辑假期功能以及样式修改
效果图: 1.日历控件html <template><div class="la-container"><la-pagetitle title=&qu ...
- python 日历控件_python selenium 处理时间日期控件(十六)
测试过程中经常遇到时间控件,需要我们来选择日期,一般处理时间控件通过层级定位来操作或者通过调用js来实现. 1.首先我们看一下如何通过层级定位来操作时间控件. 通过示例图可以看到,日期控件是无法输入日 ...
- 自定义日历控件背景样式
#自定义日历控件的使用 一.DatePicker日期选择类的使用 DatePicker常用xml属性: XML属性 描述 android:calendarViewShown 设置该日期选择是否显示Ca ...
- WPF Calendar 日历控件 样式自定义
原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不 ...
最新文章
- 业界 | 清华发布《人工智能芯片技术白皮书(2018)》
- 10家最具创新性的机器学习公司
- mysql 锁的介绍
- oracle pdb 表空间,Oracle 12c CDB 和 PDB 表空间管理和配置 说明
- 持续集成:CruiseControl.NET + VisualSVN.Server
- php实现soap,PHP的SOAP原理及实现详解
- DSB2017第一名代码尝试运行(记录自用)(五)
- 试用期要盯紧你的“四金”
- 无线网络技术学习总结
- Pubmedy加载时显示程序包无效的解决方案
- bt种子增加服务器,bt发布-BT种子怎么发布?服务器地址、发布者网址应怎么填写? 爱问知识人...
- 将日期格式格式化为XXXX/XX/XX
- python return break_Python基础:return和break的不同
- graphs菜单_spss菜单栏中英文对照.ppt
- buildroot rz sz 配置
- 浅谈基于openssl的多级证书,Multi-level CA的签发和管理,以及双向认证
- Centos7 网卡做 bond 以及 team
- DIY | 教你做一个万圣节专属徽章!
- Ruby使用RabbitMQ(基础)
- 【ctf学习】RSA共模攻击
热门文章
- 探索setTimeout
- 外贸-Whatsapp Super Fast Filter Pro
- react父子组件通信
- mkdir: 无法创建目录““: 没有那个文件或目录
- 高精度算r的n次方 问题 H: 乾隆巡江南
- xml.sax包详解
- 用c语言写一个背景为黑色,烟花绽放的页面,页面中间为新年倒计时,下一行为祝福话语...
- Pugixml图文讲解
- it企业实习_大学生IT公司实习报告
- 道法自然《三》:框架设计要提供机制