React Responsive Datepicker

NPM JavaScript Style Guide

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

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
headerBackgroundColor ❌ 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

GitHub

View Github