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

Thank You !