React-custom-date-selector NPM

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

calander

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"`