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