Nice Dates é um seletor de datas e intervalos de datas moderno, flexível, modular, compatível com dispositivos móveis e de boa aparência para aplicativos React.
# Yarn
$ yarn add react-nice-dates date-fns
# NPM
$ npm i react-nice-dates date-fns --saveimport 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'
function DatePickerExample() {
const [date, setDate] = useState()
return (
<DatePicker date={date} onDateChange={setDate} locale={enGB}>
{({ inputProps, focused }) => (
<input
className={'input' + (focused ? ' -focused' : '')}
{...inputProps}
/>
)}
</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
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
Autor: hernansartorio
Demonstração ao vivo: Ver a demonstração
Link para download: Baixe o código-fonte
Site oficial: https://github.com/hernansartorio/react-nice-dates
Licença: MIT