A Full Responsive Modular Date Picker For React

Category: React React DatePicker | July 1, 2021
Author: hernansartorio
Official Page: Go to website
Last Update: July 1, 2021
License: MIT

react nice dates

Description

React Nice Dates is a full responsive modular date picker for React, which comes with features that enables you to create date pickers or you can also create date range pickers. These are common feature and you don’t need other components to install.

How to install React Nice Dates component?

You can install it with NPM or Yarn.

#NPM
npm install react-nice-dates date-fns --save

#Yarn
yarn add react-nice-dates date-fns

Then, import the component and CSS like this.

import React, { useState } from 'react'
import { enGB } from 'date-fns/locale'
import { DatePicker } from 'react-nice-dates'
import 'react-nice-dates/build/style.css'

Code Example

function DatePickerExample() {
  const [date, setDate] = useState()
  return (
    <DatePicker date={date} onDateChange={setDate} locale={enGB}>
      {({ inputProps, focused }) => (
        <input
          className={'input' + (focused ? ' -focused' : '')}
          {...inputProps}
        />
      )}
    </DatePicker>
  )
}