Check out react-flatpickr, a calendar support library for ReactJS

Tram Ho

I> Introduction

I am looking for a library that supports basic calendar format like booking sites, then find this flatpickr library very good for calendaring, try to find out it also has a library for react react-flatpickr . Together I find out what’s good about it, but I find it respond so well

Install yet :

  • Install a new project with create-react-app:

  • Install any calendar library

By default, when installing this library, it installed flatpickr already

II> Start to learn yet:

1> Basic calendar format:

Now I want a basic calendar, when choosing a calendar, I will change the input cell value:

So through some simple code we have a calendar as shown below …..

2> Customize with a number of support options of the library

a> Theme:

  • If you are tired of its default theme, you can switch to dark themes by changing this line:


  • Still not like, we change to the airbnb theme

  • In addition, the library also supports these types of themes:

Of course you can customize the theme depending on your preferences (bow)

b> Its options and events:

  • dateFormat: as the original example has the dmY format corresponding to date-month-year (4 digits). More details can be found here:
  • Its Events: The most popular ones are still:
    • onReady: what it would look like when initialized
    • onOpen: when open
    • onClose: when closed
    • onDestroy: when destroy

See more here

  • Its instances ( ): There are many methods for you similar to the calendar like selectedDates for getting the selected date, clear dufngn to delete the calendar, jumpToDate jump to date
  • Another popular option to select the date and time is enableTime. You change as below:


c> Advanced customization with plugin option:

In addition, the library can also support more customization with the plugin option, you can use the existing plugin of the library, refer to this link:

I only introduce 1 plugin used to choose May:


III> Conclusion:

This library supports common datepicker cases and is customizable. Hopefully with your introduction you can add an option to apply in your work. Thank you for reading

Share the news now

Source : Viblo