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

Friday, 21/08/2020

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:

create-create-app calendar-demo
cd calendar-demo
yarn
yarn start

create-create-app calendar-demo

cd calendar-demo

yarn

yarn start

Install any calendar library

yarn add react-flatpickr

1 2	yarn add react-flatpickr

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:

<span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span>

<span class="token comment">// import thư viện và style tương ứng</span>
<span class="token keyword">import</span> <span class="token string">"flatpickr/dist/flatpickr.css"</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> Flatpickr <span class="token keyword">from</span> <span class="token string">"react-flatpickr"</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Calendar</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// state lưu trữ ngày tháng hiện tại</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span> date <span class="token punctuation">,</span> setDate <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span> Flatpickr
        value <span class="token operator">=</span> <span class="token punctuation">{</span> date <span class="token punctuation">}</span> <span class="token comment">// giá trị ngày tháng</span>
        <span class="token comment">// các option thêm cho thư viện</span>
        options <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span>
          dateFormat <span class="token operator">:</span> <span class="token string">"d-m-Y"</span> <span class="token comment">// format ngày giờ</span>
        <span class="token punctuation">}</span> <span class="token punctuation">}</span>
        <span class="token comment">// event</span>
        onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token parameter">dateSelect</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setDate</span> <span class="token punctuation">(</span> dateSelect <span class="token punctuation">)</span> <span class="token punctuation">}</span>
      <span class="token operator">/</span> <span class="token operator">&gt;</span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import React , { useState } from 'react' ;

// import thư viện và style tương ứng

import "flatpickr/dist/flatpickr.css" ;

import Flatpickr from "react-flatpickr" ;

function Calendar ( ) {

// state lưu trữ ngày tháng hiện tại

const [ date , setDate ] = useState ( new Date ( ) ) ;

return (

< Flatpickr

value = { date } // giá trị ngày tháng

// các option thêm cho thư viện

options = { {

dateFormat : "d-m-Y" // format ngày giờ

} }

// event

onChange = { ( dateSelect ) => setDate ( dateSelect ) }

/ >

) ;

}

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:

import "flatpickr/dist/themes/dark.css";
// import "flatpickr/dist/flatpickr.css";

import "flatpickr/dist/themes/dark.css";

// import "flatpickr/dist/flatpickr.css";

Results:

Still not like, we change to the airbnb theme

import "flatpickr/dist/themes/dark.css";
// import "flatpickr/dist/flatpickr.css";

import "flatpickr/dist/themes/dark.css";

// import "flatpickr/dist/flatpickr.css";

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

light.css
confetti.css
material_blue.css
material_green.css
material_orange.css
material_red.css

light.css

confetti.css

material_blue.css

material_green.css

material_orange.css

material_red.css

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: https://flatpickr.js.org/formatting/
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 https://flatpickr.js.org/events/

Its instances ( https://flatpickr.js.org/instance-methods-properties-elements/ ): 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:

<span class="token operator">&lt;</span> Flatpickr
        value <span class="token operator">=</span> <span class="token punctuation">{</span> date <span class="token punctuation">}</span>
        options <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span>
          dateFormat <span class="token operator">:</span> <span class="token string">"d-m-Y H:m"</span> <span class="token punctuation">,</span>
          enableTime <span class="token operator">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span> <span class="token punctuation">}</span>
        onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token parameter">dateSelect</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setDate</span> <span class="token punctuation">(</span> dateSelect <span class="token punctuation">)</span> <span class="token punctuation">}</span>
      <span class="token operator">/</span> <span class="token operator">&gt;</span>

< Flatpickr

value = { date }

options = { {

dateFormat : "d-m-Y H:m" ,

enableTime : true

} }

/ >

result:

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: https://flatpickr.js.org/plugins/

I only introduce 1 plugin used to choose May:

import React, { useState } from "react";

import "flatpickr/dist/themes/airbnb.css";
import Flatpickr from "react-flatpickr";
// import plugin
import MonthSelect from "flatpickr/dist/plugins/monthSelect/index";
import "flatpickr/dist/plugins/monthSelect/style.css";

function Calendar() {
  const [date, setDate] = useState(new Date());

  return (
      &lt;Flatpickr
        value={date}
        options={{
        // import plugin
          plugins: [
            new MonthSelect({
              shorthand: true, //defaults to false
              dateFormat: "m-Y", //defaults to "F Y"
              altFormat: "F Y", //defaults to "F Y"
              theme: "dark" // defaults to "light"
            })
          ]
        }}
        onChange={(date) =&gt; {
          setDate({ date });
        }}
      /&gt;
  );
}

import React, { useState } from "react";

import "flatpickr/dist/themes/airbnb.css";

import Flatpickr from "react-flatpickr";

// import plugin

import MonthSelect from "flatpickr/dist/plugins/monthSelect/index";

import "flatpickr/dist/plugins/monthSelect/style.css";

function Calendar() {

const [date, setDate] = useState(new Date());

return (

<Flatpickr

value={date}

options={{

// import plugin

plugins: [

new MonthSelect({

shorthand: true, //defaults to false

dateFormat: "m-Y", //defaults to "F Y"

altFormat: "F Y", //defaults to "F Y"

theme: "dark" // defaults to "light"

})

]

}}

onChange={(date) => {

setDate({ date });

}}

);

}

Result:

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

Refer:

Home flatpickr: https://github.com/flatpickr/flatpickr
Home react-flatpickr: https://github.com/haoxins/react-flatpickr

Share the news now

Source : Viblo