22 Open-source Free Date, Clock, Date Picker and Calendar JavaScript Libraries for React

Datepicker and calendar JavaScript libraries are open-source tools that developers can use to add date and time selection functionality to their web applications. These libraries provide pre-built components that can be easily integrated into a project, saving time and effort. The libraries mentioned in this document, such as React Date Picker and React Big Calendar, are specifically designed for use in React applications.

Here are some open-source and free libraries for React that can be used for date, clock, date picker and calendar functionalities:

1- React Calendar

This is a simple lightweight calendar library for React. Its features include:

• Pick days, months, years, or even decades
• Supports range selection
• Supports virtually any language
• No moment.js needed

GitHub - wojtekmaj/react-calendar: Ultimate calendar for your React app.

Ultimate calendar for your React app. Contribute to wojtekmaj/react-calendar development by creating an account on GitHub.

GitHubwojtekmaj

2- React Dates

React Dates is an easily internationalize, accessible, mobile-friendly date picker library for the web.

GitHub - react-dates/react-dates: An easily internationalizable, mobile-friendly datepicker library for the web

An easily internationalizable, mobile-friendly datepicker library for the web - GitHub - react-dates/react-dates: An easily internationalizable, mobile-friendly datepicker library for the web

GitHubreact-dates

3- Calendar

Calendar is a React library that supports years, months and days. It is easy to install, configure, and use.

GitHub - Maycon-Santos/calendar

Contribute to Maycon-Santos/calendar development by creating an account on GitHub.

GitHubMaycon-Santos

4- rc-calendar

Yet another React Calendar and date picker. It comes with useful shortcuts support and many other useful features:

• support ie9,ie9+, chrome, Firefox, safari
• support date, month, year, decade select panel
• support week number
• support en_US and zh_CN locale(UI), use moment.utcOffset to set timezone
• support aria and keyboard accessibility

GitHub - react-component/calendar: React Calendar

React Calendar. Contribute to react-component/calendar development by creating an account on GitHub.

GitHubreact-component

5- React Big Calendar

An events calendar component built for React and made for modern browsers (read: not IE) and uses flexbox over the classic tables-caption approach.

GitHub - jquense/react-big-calendar: gcal/outlook like calendar component

gcal/outlook like calendar component. Contribute to jquense/react-big-calendar development by creating an account on GitHub.

GitHubjquense

6- react-date-range

A date library agnostic React component for choosing dates and date ranges. Uses date-fns for date operations.

GitHub - hypeserver/react-date-range: A React component for choosing dates and date ranges.

A React component for choosing dates and date ranges. - GitHub - hypeserver/react-date-range: A React component for choosing dates and date ranges.

GitHubhypeserver

7- React Native Calendars

A declarative cross-platform React Native calendar component for iOS and Android.

Features

• Pure JS. No Native code required
• Date marking - dot, multi-dot, period, multi-period and custom marking
• Customization of style, content (days, months, etc) and dates
• Detailed documentation and examples
• Swipeable calendar with flexible custom rendering
• Scrolling to today, selecting dates, and more
• Allowing or blocking certain dates
• Accessibility support
• Automatic date formatting for different locales

8- Date Object

Date Object is a JavaScript React library for working with Date and Time in different calendars and locals

GitHub - shahabyazdi/react-date-object: JavaScript library for working with Date and Time in different calendars and locals

JavaScript library for working with Date and Time in different calendars and locals - GitHub - shahabyazdi/react-date-object: JavaScript library for working with Date and Time in different calendar…

GitHubshahabyazdi

9- Calendra

Calendra is an open-source feature-rich Calendar library that adds cool features in your React projects.

GitHub - Jainex17/Calendra: amazing calendar for your React app.

amazing calendar for your React app. Contribute to Jainex17/Calendra development by creating an account on GitHub.

GitHubJainex17

10- React DateTime

A date and time picker in the same React.js component. It can be used as a datepicker, timepicker or both at the same time. It is highly customizable, and it even allows editing date's milliseconds.

GitHub - arqex/react-datetime: A lightweight but complete datetime picker react component.

A lightweight but complete datetime picker react component. - GitHub - arqex/react-datetime: A lightweight but complete datetime picker react component.

GitHubarqex

11- React DayPicker

DayPicker is a date picker component for React. Renders a monthly calendar to select days. DayPicker is customizable, works great with input fields and can be styled to match any design.

Features:

• ☀️ Select days, ranges or whatever
• 🧘‍♀️ using date-fns as date library
• 🌎 Localizable into any language
• ➡️ Keyboard navigation
• ♿️ WAI-ARIA support
• 🤖 Written in TypeScript
• 🎨 Easy to style and customize
• 🗓 Support multiple calendars
• 📄 Easy to integrate input fields

GitHub - gpbl/react-day-picker: DayPicker is a customizable date picker component for React, with native TypeScript support.

DayPicker is a customizable date picker component for React, with native TypeScript support. - GitHub - gpbl/react-day-picker: DayPicker is a customizable date picker component for React, with nati…

GitHubgpbl

12- React-Trip-Date

React-Trip-Date is a fully customizable Date/Range picker for your React applications. It supports themes, responsive design, Jalali, and Gregorian calendars, and comes with full Day.js support.

GitHub - samsam-ahmadi/react-trip-date: It’s a fully customizable Date/Range picker for ReactJS.

It’s a fully customizable Date/Range picker for ReactJS. - GitHub - samsam-ahmadi/react-trip-date: It’s a fully customizable Date/Range picker for ReactJS.

GitHubsamsam-ahmadi

13- react-calendar-z

react-calendar-z is yet another calendar library for React projects.

GitHub - delpikye-v/react-calendar: React calendar, IQ for test render date - no dependent lib. (create npm lib)

React calendar, IQ for test render date - no dependent lib. (create npm lib) - GitHub - delpikye-v/react-calendar: React calendar, IQ for test render date - no dependent lib. (create npm lib)

GitHubdelpikye-v

15- calendar-scheduler-react

A calendar app with events that you can download, install, and use. You can check the demo at Netlify.

GitHub - suyeshaa/calendar-scheduler-react

Contribute to suyeshaa/calendar-scheduler-react development by creating an account on GitHub.

GitHubsuyeshaa

16- react-date-range-calendar

React Calendar to pick the range between two dates and easily customizable.

GitHub - bilal114/react-date-range-calendar: react calendar for choosing the date range

react calendar for choosing the date range. Contribute to bilal114/react-date-range-calendar development by creating an account on GitHub.

GitHubbilal114

17- Custom-Planner

Custom Planner is a mobile-first day planner web application that allows a user to create an account, select a day from the calendar and create a to-do list. Edit, erase, or complete created to-do items. Each uncompleted to-do item rolls over to the next day. To-do lists refresh monthly.

This is an early stage of a project I have dreamed about. Unable to find a planner app that suits my preference, I am working on creating a customizable planner.

GitHub - Gaitherdb/Custom-Planner: Introducing an innovative notes app that seamlessly integrates a calendar interface, empowering users to select dates, manage daily tasks or notes, and automatically carry over unfinished tasks to the following day.

Introducing an innovative notes app that seamlessly integrates a calendar interface, empowering users to select dates, manage daily tasks or notes, and automatically carry over unfinished tasks to…

GitHubGaitherdb

18- React Resource Timeline

A small react component to render events on a timeline.

GitHub - benjamin-tessem/react-resource-timeline: A small react component to render events on a timeline

A small react component to render events on a timeline - GitHub - benjamin-tessem/react-resource-timeline: A small react component to render events on a timeline

GitHubbenjamin-tessem

19- Modular DatePicker

A Modular DatePicker with date range support for React projects.

GitHub - faustienf/datepicker: 📅 Make your DatePicker from calendar-components

📅 Make your DatePicker from calendar-components. Contribute to faustienf/datepicker development by creating an account on GitHub.

GitHubfaustienf

20- rb-datepicker

A date/time picker for React using bootstrap.

GitHub - atkawa7/rb-datepicker: React bootstrap date range picker

React bootstrap date range picker. Contribute to atkawa7/rb-datepicker development by creating an account on GitHub.

GitHubatkawa7

21- react-day-picker

This is a simple, flexible date picker component for React. It is highly customizable and localizable, with ARIA support and no external dependencies. The size of the component is only 9KB when gzipped.

GitHub - alexkuz/react-day-picker-themeable: Flexible date picker for React

Flexible date picker for React. Contribute to alexkuz/react-day-picker-themeable development by creating an account on GitHub.

GitHubalexkuz

22- r-date-picker

A React Date Picker with multilingual support.

GitHub - KELEN/r-date-picker: Base on react high customize date picker component

Base on react high customize date picker component - GitHub - KELEN/r-date-picker: Base on react high customize date picker component

GitHubKELEN

These libraries can save time and effort in implementing these functionalities and can be customized to fit the specific needs of a project.