Modern Date Picker Calendar Component – Nice Dates

Nice Dates is a modern, flexible, modular, mobile-friendly, nice-looking date and date range picker for React applications.

Install & Import:

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

# NPM
$ npm i react-nice-dates date-fns --save

import React, { useState } from 'react'

// import a local 
import { enUS } from 'date-fns/locale'

// datePicker
import { DatePicker } from 'react-nice-dates'

// dateRangePicker
import { DateRangePicker, START_DATE, END_DATE } from 'react-nice-dates'

// datePickerCalendar
import { DatePickerCalendar } from 'react-nice-dates'

// calendar only
import { Calendar } from 'react-nice-dates'

// stylesheet
import 'react-nice-dates/build/style.css'

Basic usage:

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

Default props for datepicker.

children: func.isRequired,
locale: object.isRequired,
date: instanceOf(Date),
onDateChange: func,
format: string,
minimumDate: instanceOf(Date),
maximumDate: instanceOf(Date),
modifiers: objectOf(func),
modifiersClassNames: objectOf(string),
weekdayFormat: string

Default props for daterangepicker.

children: func.isRequired,
locale: object.isRequired,
startDate: instanceOf(Date),
endDate: instanceOf(Date),
onStartDateChange: func,
onEndDateChange: func,
format: string,
minimumDate: instanceOf(Date),
maximumDate: instanceOf(Date),
minimumLength: number,
maximumLength: number,
modifiers: objectOf(func),
modifiersClassNames: objectOf(string),
weekdayFormat: string

Preview:

Download Details:

Author: hernansartorio

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/hernansartorio/react-nice-dates

License: MIT