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