Simple Date Picker component for React Sample in 2020

Simple Date Picker component for React Sample in 2020

tutorials -

React Simple Date Picker

Simple Date Picker component for React.


npm install --save react-simple-datepicker


Simple example on how to use Datepicker. Just import DatePicker module and styles for it.

import React from 'react';
import DatePicker from 'react-simple-datepicker';
import 'react-simple-datepicker/dist/index.css';

class App extends React.Component {
  constructor () {

    this.state = {
      date: new Date()

  render () {
    return <DatePicker date={} />;


  • date: (Date) — specifies the start date
  • minDate: (Date) — specifies the minimal date
  • maxDate: (Date) — specifies the maximal date
  • clickOnDate: (Function) — called when the user selects a date

ClassName Props

To specify datepicker styles you can use these props:

  • datepickerClassName
  • inputClassName
  • calendarClassName
  • monthClassName
  • prevMonthClassName
  • nextMonthClassName
  • dayClassName
  • dayActiveClassName
  • dayDisabledClassName
  • dayFromOtherMonthClassName


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff