@vj97/react-date-picker

1.0.12 • Public • Published

React Date Picker

A lightweight plugin to select both Single Date and a Date Range.

Features

  • Single Date Selection
  • Date Range Selection
  • Relative and Absolute Picker Option
  • Search on Relative Option
  • Month/Year Selection View

Demo

See demo here

Screenshots

Date Picker

App Screenshot

Relative Options

App Screenshot

Relative Search

App Screenshot

Absolute Date Picker

App Screenshot

Month Selection

App Screenshot

Year Selection

App Screenshot

Usage/Examples

Import css

import "@vj97/react-date-picker/dist/style.css";

Code Example

import { DatePicker } from '@vj97/react-date-picker'

 <DatePicker 
    placeholder="Choose Date"
    selectionType="range"
    onChange={handleDateChange}
    />

function handleDateChange (dates) {
    console.log(dates)

    // output for single date will be string
    // output for date range will be object as below 
    // {stateDate: "", endDate: ""}
}

Supported props

Property name Type Default Description
selectionType single/range single Type of the picker
dateFormat string DD MMM, YYYY The date format to be returned in the onChange event
viewFormat string dateFormat The date format to be shown in the input field
selectedDates string/date for single and array of 2 string/date for range, in 'YYYY-MM-DD' format NULL Date/Range to be selected
minDate string/date NULL Minimun date
maxDate string/date dark Maximum date
placeholder string NULL Placeholder
colors object {} Theme colors, refer below for supported colors
showCalendarIcon boolean true To show calendar icon on input right
containerStyle style object {} Style of the input container
inputStyle style object {} Style of the input
containerClass string NULL Custom class for input container
inputClass string NULL Custom class for input
disabled boolean false disable datepicker input
required boolean false required datepicker input
defaultPickerType relative/absolute absolute Picker type to be opened be default
onChange function n/a Callback called when date is selected

Colors

{
    selection: "", // Highlight color for selected dates
    text: "", // Text color for picker 
    background: "", // Background color for date picker popup
}

Package Sidebar

Install

npm i @vj97/react-date-picker

Weekly Downloads

5

Version

1.0.12

License

MIT

Unpacked Size

64.6 kB

Total Files

8

Last publish

Collaborators

  • vijaykumawat897