Componente moderno de calendário selecionador de data

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.

Instalar e instalar Importar:

# 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'

Uso básico:

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

Adereços padrão para 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

Adereços padrão para 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

Visualização:

Detalhes do download:

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