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][dill] on GitHub.

Installation

npm install --save react-responsive-datepicker

or use yarn

yarn add react-responsive-datepicker

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|

Date Formats

• D to show short day name, etc. Sun, Tue.
• DD to show day name, etc. Sunday, Monday.
• d to show date without 0.
• dd to show date with 0.
• MM to show month name, etc. January, March.
• M to show short month name, etc. Jan, Mar.
• m to show month number.
• mm to show month number with 0.

License

MIT © agunbuhori

Made with ❤️

By Agun Buhori