30 个最好的免费日历和日期选择jQuery插件

jopen 10年前

Calendar Plugins

1. CLNDR.js

01-clndr-js-open-source-calendar
Why it’s brilliant:

  • Easy to style and scale to fit any website.
  • Responsive for every screen size.
  • Dynamic event viewer with specific details and dates.
  • Demo  Download

 

2. FullCalendar

02-full-calendar-jquery-plugin
Why it’s brilliant:

  • Drag & Drop functionality offers an interactive atmosphere.
  • Sortable views for days, weeks, or months.
  • Optional connectivity with Google Calendar.
  • Insanely detailed documentation for developers.
  • Demo  Download

 

3. Zabuto Calendar

03-zabuto-calendar-jquery-plugin
Why it’s brilliant:

  • External data may be pulled via AJAX/JSON.
  • Runs on top of Bootstrap with traditional CSS classes.
  • Optional multi-language settings.
  • Demo  Download

 

4. Verbose Calendar

04-verbose-calendar-jquery-plugin
Why it’s brilliant:

  • The fullscreen minimalist interface is well-designed and full of ingenuity.
  • Verbose Calendar is laid out horizontally instead of vertically. Dates and months are easier to access.
  • All click events are handled through a callback method. This requires some knowledge of jQuery but offers a lot more control over the functionality.
  • Demo  Download

 

5. Simple Event Calendar

screen-shot-2015-01-23-at-5.29.59-pm.png
Why it’s brilliant:

  • The “Personal list” feature works like a dynamic events list.
  • Clean, minimalist design for a widely compatible interface.
  • Each event is coded into HTML so it can be indexed and read via bots/crawlers.
  • Demo  Download

 

6. e-Calendar

06-ecalendar-jquery-open-source-code
Why it’s brilliant:

  • Calendar content is managed through JSON.
  • Date & time info for individual events.
  • Easy to limit navigation of previous or future months.
  • Demo  Download

 

7. jQM Calendar

07-jqm-calendar-mobile-ui-plugin
Why it’s brilliant:

  • The most convenient fullscreen calendar for jQuery Mobile.
  • Customizable theme and content for calendar events.
  • Lightweight! JS+CSS files come out to ~14KB.
  • Demo  Download

 

8. GoogleCalReader

08-google-cal-reader-jquery-plugin
Why it’s brilliant:

  • API connection with Google Calendar is quick & painless.
  • Almost no CSS; Completely blank template for custom styling.
  • Data is appended right into HTML with pre-built structural elements.
  • Demo  Download

 

Datepicker Plugins

9. pickadate.js

09-pickadate-plugin-jquery-open-source
Why it’s brilliant:

  • Astoundingly straightforward interface for web & mobile.
  • Very simple JavaScript initiation.
  • JS-based API with extensible options and features.
  • Demo  Download

 

10. glDatePicker

10-gl-datepicker-plugin-open-source
Why it’s brilliant:

  • Navigation limits to specific months or weeks.
  • Setup details on special days or events.
  • 7kb compressed with plenty of custom options.
  • Demo  Download

 

11. Multiple Dates Picker

11-multiple-date-picker-calendar-ui
Why it’s brilliant:

  • Allows multiple consecutive dates and non-sequential dates.
  • Runs as a standalone widget or attached to an input field.
  • Great online documentation and live sample demos.
  • Demo  Download

 

12. DateTimePicker

12-datetime-picker-calendar-plugin-jquery
Why it’s brilliant:

  • Offers many different formats for date & time selection.
  • Requires just a single line of JS code to operate.
  • Themeable CSS file with documentation.
  • Demo  Download

 

13. Datepair.js

13-jquery-datepair-plugin-open-source
Why it’s brilliant:

  • Documented options and methods for hand-written code.
  • Specifically built for range selection between two datetime periods.
  • No dependencies but can optionally work with jQuery, Zepto, or Bootstrap.
  • Demo  Download

 

14. Timepicker

14-timepicker-jquery-plugin-open-source
Why it’s brilliant:

  • More focused on time with features like duration.
  • Various time formatting styles to choose from.
  • Works on any HTML element, input field or otherwise.
  • Demo  Download

 

15. jQuery UI Datepicker

15-jquery-ui-datepicker-calendar-component.jpg
Why it’s brilliant:

  • The most common datepicker plugin with the greatest amount of support.
  • Easy to customize and restyle for your own website.
  • Has a library of animations and extra effects attached to the datepicker.
  • Demo Download

 

16. Rome

16-rome-calendar-plugin-open-source
Why it’s brilliant:

  • No immediate jQuery dependency.
  • Supports all major browsers even dating back to IE7.
  • Offers both a date and time picker in the same window.
  • Demo  Download

 

17. jCal

17-multiday-calendar-picker-jcal
Why it’s brilliant:

  • Customizable multi-month datepicker interface.
  • Allows multi-date selection over a period of weeks or months.
  • Set a limited number of days for one selection(ex: only 7-day periods).
  • Demo  Download

 

18. Zebra Datepicker

18-zebra-datepicker-calendar-plugin
Why it’s brilliant:

  • Allows date ranges connected with multiple input fields.
  • Two default themes with accessible customization features.
  • Supports all major browsers including legacy versions like IE6+.
  • Demo  Download

 

19. jQM DateBox

19-jquery-mobile-datebox-plugin
Why it’s brilliant:

  • Works perfectly with all versions of jQuery Mobile.
  • Comprehensive API documentation for further development.
  • Built-in theme designer with customizable inputs and features.
  • Includes many different interfaces like the square calendar, iOS flipbox, or +/- incremental boxes.
  • Demo  Download

 

20. Filthypillow

20-filthy-pillow-jquery-calendar-picker
Why it’s brilliant:

  • Options for pulling the current time.
  • Keyboard shortcuts are built into the plugin code.
  • Easy to save and pass dates into backend functions.
  • Demo  Download

 

21. PickMeUp

21-pickmeup-jquery-calendar-selector
Why it’s brilliant:

  • Select multiple dates as a range or as separate entities.
  • Multi-month interface to display more than one month at a time.
  • Plenty of configuration options for the interface and user experience.
  • Demo  Download

 

22. DatePicker

22-eyecon-datepicker-open-source-plugin
Why it’s brilliant:

  • Mark holidays or special days/weekends using CSS.
  • International localization for different languages.
  • Flat-mode selection for individual date pieces(select year, then month, then day).
  • Demo  Download

 

23. Simple DateTimePicker

23-simple-datetime-picker-jquery
Why it’s brilliant:

  • Customizable languages and date/time formatting options.
  • Both date and time selection are located in the same place.
  • Date/time picker can be displayed inline or attached to an input field.
  • Demo  Download

 

24. jQuery Mobile Date Nav

24-jquery-mobile-date-navigation-plugin
Why it’s brilliant:

  • Runs a simpler Mobile theme compared to jQM DateBox.
  • Default content is built using HTML5 data-attributes.
  • Arrow navigation is more straightforward but offers less control.
  • Demo  Download

 

25. Flat DateTime Picker

25-flat-datetime-picker-jquery-plugin
Why it’s brilliant:

  • Completely responsive interface.
  • Handles date, time, or date/time in a single box.
  • Flat & clean UI is perfect for any website or mobile webapp.
  • Huge table of parameters documented with example code snippets.
  • Demo  Download

 

26. Pikaday

26-pikaday-open-source-jquery-plugin
Why it’s brilliant:

  • Extremely lightweight(minified source is ~5kb).
  • Modular cascading styles for easy customization.
  • No immediate dependencies with optional jQuery support.
  • Demo  Download

 

27. ClockPicker

27-clockpicker-jquery-clock-input-plugin
Why it’s brilliant:

  • Circular analog clock interface is a unique method for time selection.
  • Supports both web & mobile devices. Fantastic touchscreen support.
  • The library is designed to run over Bootstrap using the default styles.
  • Demo  Download

 

28. Bootstrap Date Paginator

28-bootstrap-paginator-date-picker
Why it’s brilliant:

  • Dates are organized on a horizontal timeline with an optional calendar component.
  • The plugin runs over Bootstrap and incorporates all of the default styles.
  • A wide variety of options are customizable and easy to play with directly through jQuery.
  • Demo  Download

 

29. jQuery UI DateRangePicker

29-daterangepicker-ui-jquery-plugin
Why it’s brilliant:

  • Detailed API with a full list of options and methods.
  • Runs on top of jQuery UI with the same theme customization benefits.
  • Range can be expanded to showcase multiple months in the same window.
  • Offers preset date ranges based on the current day(ex: last 7 days, month to date, next 30 days).
  • Demo  Download

 

30. Ion Calendar

30-ion-calendar-jquery-plugin-preview
Why it’s brilliant:

  • All touchscreen devices are fully supported.
  • Works as both a regular calendar and datepicker.
  • Supports all international languages and date formats.
  • The click event callback allows you to write a custom method for handling interactions.
  • Demo  Download

 

Tutorials for Building Your Own Calendar/Datepicker

If you’re someone who likes to get under the hood and customize from scratch then you may prefer to start with a tutorial. jQuery plugins are easy to customize once you learn the code structure. But there’s nothing like the feeling of starting and completing a brand new plugin.

Each of these tutorials place a focus on building a calendar or datepicker interfaces through jQuery. If you have the patience and time then it may be worth building something from scratch. Not every tutorial goes in-depth about the plugin side of coding, which may require a bit more research. But once you understand the core concepts everything else should fall right into place.

Unfortunately there aren’t many tutorials related to datepickers and calendars because they’re much less common than slideshows or dropdown menus. But this collection should be perfect to satiate the appetite of anyone thirsting for greater knowledge.

1. CSS3/jQuery UI Calendar

tutorial-01-designmodo-jquery-ui-calendar
Why it’s brilliant:

Perhaps the most popular Calendar library is jQuery UI. It can be expanded, customized, and restyled using a little jQuery and CSS. Valeriu Timbuc wrote this tutorial expounding on how to build a dynamic calendar interface. It covers the general setup of jQuery along with the custom CSS3 properties used to design and restyle everything.

View Tutorial

 

2. Calendario

tutorial-02-flexible-calendar-jquery-plugin
Why it’s brilliant:

The Codrops blog is perhaps one of my absolute favorites in the realm of web development. Their tutorials are concise, well-designed, and work exactly as featured.

Mary Lou is the author and developer for this jQuery plugin tutorial named Calendario. It’s a fully-responsive flexible plugin for creating a calendar interface with any style you please. The tutorial is super easy to follow and the plugin code is 100% free to download. Anyone who’s primarily interested in frontend development with jQuery should really go through this tutorial.

View Tutorial

 

3. jQuery/AJAX Calendar

tutorial-03-php-ajax-jquery-code-calendar
Why it’s brilliant:

As I mentioned before, most web calendars are built using some type of backend language. Although jQuery can be great for dynamic features, it can be dramatically improved with some backend programming.

This tutorial written by Josh Lockhart does everything right. You’ll be introduced to the jQuery AJAX API for connecting into a PHP backend. It also covers the initiation of a MySQL database used to store the datetime information. I’ll admit this is definitely a tutorial for more advanced developers – but if you’re curious to learn about PHP this may be perfect introductory material.

View Tutorial

 

4. Custom jQuery UI Calendar

tutorial-04-custom-jquery-ui-color-scheme-calendar
Why it’s brilliant:

The default jQuery UI theme is rather straightforward and rarely match existing websites. In this tutorial you’ll learn how to customize the UI Calendar/Datepicker theme from scratch. It does not specifically rely on ThemeRoller, instead opting towards a more customized approach. Although the final demo is a little bare, it grants you much more control to restyle the interface in any direction you please.

View Tutorial

 

5. jQuery UI Datepicker in WordPress

tutorial-05-jquery-datepicker-wordpress
Why it’s brilliant:

Adding the jQuery UI library to your static HTML page is a breeze. However getting it to run in WordPress is a whole separate topic – not to mention the code required for appending a specific widget into a page is often quite tedious.

But thanks to this Datepicker tutorial you should have no problem incorporating the jQuery UI component into any WordPress theme. It goes into great detail about the proper way to include the jQuery UI file through WordPress’ wp_enqueue_script function. Any WP developers out there who need to incorporate a frontend datepicker will take away reliable information from this post.

View Tutorial

 

6. Bootstrap Datepicker

tutorial-06-bootstrap-datepicker-guide-tutorial
Why it’s brilliant:

Although this post behaves more like documentation, it really does outline the datepicker setup in a tutorial-esque format. You’ll find dozens of pages explaining each method and how it works directly with Bootstrap. I’m a huge fan of the Bootstrap library and it feels good to know there are resources out there dedicated to supporting custom Bootstrap features.

View Tutorial

 

7. HTML5 Datepicker with Fallback

tutorial-07-datepicker-ui-concept-plugin
Why it’s brilliant:

Few developers are willing to push new standards because browser technology is often lacking in support. But HTML5 has been growing rapidly and seen a tremendous increase in general browser acceptance.

This tutorial written by TJ VanToll explains how to build an HTML5 type=”date” input field using jQuery as a fallback. It offers the best of both worlds incorporating a newer HTML5 input with a more trustworthy jQuery UI alternative. Each step is easy to follow and there are plenty of live demos throughout the article.

View Tutorial

 

8. WP Post Editor Datepicker

tutorial-08-datepicker-ui-wordpress-admin-post-page
Why it’s brilliant:

Tuts+ does a lot of multi-post tutorials which are broken up into series. This series is one such example written by Tom McFarlin who outlines the process of adding a datepicker into the WordPress post editor. All of the code is phenomenal and it’s very easy to understand. Although not everyone likes to use WordPress, it is a popular CMS for both personal and professional web projects.

View Tutorial