React-responsive-datepicker NPM

React Responsive Datepicker

This is a React Library for your projects to make datepicker looks great!

Features

Awesome UI
Customable
Mobile friendly
Add min and max date
Just use Vanilla JS to modify date

And of course Dillinger itself is open source with a public repository on GitHub.

Installation

npm install --save react-responsive-datepicker

or use yarn

yarn add react-responsive-datepicker

My Image

Example

import React from 'react'

import { DatePicker } from 'react-responsive-datepicker'
import 'react-responsive-datepicker/dist/index.css'

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <div>
      <button
        onClick={() => {
          setIsOpen(true)
        }}
      >
        Open
      </button>
      <DatePicker
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        defaultValue={new Date(2022, 8, 8)}
        minDate={new Date(2022, 10, 10)}
        maxDate={new Date(2023, 0, 10)}
        headerFormat='DD, MM dd'
      />
    </div>
  )
}

export default App

Props

These are the props to custom your datepicker. | Prop | Required | Type | Default | | ------ | ------ | ------ | ------- | | isOpen | ✅ | boolean | false | | defaultValue | ❌ | Date | null | | title | ❌ | string | Select Date | | showTitle | ❌ | boolean | true | | minDate | ❌ | Date | null | | maxDate | ❌ | Date | null | | onChange | ❌ | (date: Date) => void | | onClose | ❌ | () => void | | closeText | ❌| string|Close| | clearText | ❌| string|Clear| | headerFormat|❌ | Date format |
| monthNames | ❌| string[]|english month names| | dayNames | ❌| string[]|english day names| | colorScheme | ❌| string|purple|