[reprint] jQuery calendar control

9 Gorgeous jQuery Date Picker and Calendar Controls

2016-10-28   listen to me   java one article a day

Today's web applications are getting richer and richer. We no longer need to manually input the date and time in the web page, but use a variety of date and time selection controls. Most of the gorgeous date selection and calendar controls are Based on jQuery and HTML5, such as these 9 date selection controls to be shared today, the beautiful UI appearance and humanized operation design greatly improve the user experience, let us enjoy it together.

1. HTML5 mobile terminal with stylish date and time selection controls

We have introduced many jQuery-based date and time selection controls before, such as this Bootstrap and jQuery-based calendar control and date selection plugin . Today we are going to share an HTML5-based mobile date and time selection control. It has a special appearance and is suitable for use in mobile devices. Of course, it is also very good for PC.

Online demo  (http://www.html5tricks.com/demo/html5-mobile-datetime-picker/index.html) /     source code download (http://www.html5tricks.com/html5-mobile-datetime-picker.html ) )

2. Calendar control and date selection plugin based on Bootstrap and jQuery

This time we are going to share a beautiful and practical jQuery calendar control and date selection plugin, and this calendar control is based on Boostrap and looks good. The control has two modes, one is the calendar mode, which can quickly locate the year and month, which is very convenient. The other is the date selection mode, click the input box to pop up the date selection control, and support formatted date.

在线演示 (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。它的外观虽然很普通,但是功能很强大,不仅可以当日历组件,也可以当做日期选择控件。而且可以同时展示多个日期选择控件,效果非常不错。

Online demo (http://www.html5tricks.com/demo/Kalendae/index.html) /     source code download (http://www.html5tricks.com/javascript-kalendae.html)

The above is 9 gorgeous jQuery date selection and calendar controls, I hope it will help you.

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=327040948&siteId=291194637