react-custom-date-selector

A date selector component for your React app (Demo)

• Select Day, Month and Year
• Can use as Month picker as well
• 15 Date / Month formats available
• Can change date seperator
• Can customize the styles
• No dependencies needed

Installation

This package can be installed via npm:

npm install react-custom-date-selector --save

Getting started

Compatibility

Your project needs to use React 16 or later

Installation

Add ReactPicker to your project by executing npm install react-date-picker

Usage

Here's an example of basic usage:

import React, { Component } from 'react';
import DatePicker from 'react-custom-date-selector';

class MyApp extends Component {
  onDateSelect = (selectedDate) => {
    console.log(selectedDate);
  }

  render() {
    return (
      <div>
        <DatePicker onDateSelect={this.onDateSelect}/>
      </div>
    );
  }
}

Props

Prop name	Description	Default value	Example values
date	To set custom date as prop	"current date"	"15-08-2019"
dateFormat	To select display date format	Date: "DDMMYYYY" Month: "MonYYYY"	For date picker "YYYYMMDD" "DDMonYYYY" "DDMonthYYYY" "DDMonYYYY" "YYYYMonthDD" "DDMMYY" "YYMMDD" For month picker "YYYYMon" "MMYYYY" "YYYYMM" "MM" "Mon" "Month"
input	To change selector Button to Input	false	true
seperator	To change selector date seperator	"/"	"-"
monthSelector	To use as Month Picker	false	true
color	To change color of the selected day / month / year	"#1CA6D9"	"#32A852"
selectorStyle	To change the selector Button / Input style	{}	{ border: '1px solid gray' }
iconURL	To add icon to selector Button	n/a	"assets/calander.svg"
iconPosition	To change icon's position	"right"	"left"

License

The MIT License.

Author

Nikhin Raj nikhinrajkk@gmail.com

Thank You !