Description:
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:
