react-carbon-datepicker

An Awesome flexible date picker | Fully Customizable Color Theme | Light weight | opensource | No MomentJS | No other dependancies | Notes / Reminders

Install

npm install --save react-carbon-datepicker

Demo

This is a demo of react-carbon-datepicker

Usage

import React, { Component } from 'react'

import CarbonDatePicker from 'react-carbon-datepicker'

class Example extends Component {
  render () {
    return (
      <CarbonDatePicker onChange={this.onChange} config={this.config}/>
    )
  }
}

Props

date

The default date, should be passed in this format - 'yyyy-mm-dd'. example - '2019-12-23'

config

The Configuration for the date picker

Prop	Defenition	Data type
alwaysShow	If passed as true, The DatePicker will be always on the visible state	boolean
showCalendar	If passed as true, The DatePicker will be on visible state initially	boolean
themePreset	To set the default theme, 'dark' and 'default' is available	string
reminders	Array of reminder objects	array
theme	Theme config object	object

config.reminders

The Reminders / Notes that will show in the given date

Prop	Defenition	Data Type
note	The text which will be displayed as the reminder	string
color	The color of the tag of reminder	string
timestamp	The timestamp of the day	int

config.theme

Theme for the DatePicker

{
        squareEdge: false,
        background: '#fff',
        dateHeaderColor: '#777',
        button: {
            background: '#fff',
            color: '#999',
            hover: {
                background: '#f9f9f9',
                color: '#555',
            }
        },
        input: {
            background: '#f4f4f4',
            color: '#555',
        },
        year: {
            selector: {
                background: '#fff',
                pointerColor: 'rgba(0,0,0,0.03)',
                listItem: {
                    background: 'transparent',
                    color: '#999',
                    hover: {
                        background: 'transparent',
                        color: '#333',
                    },
                    active: {
                        background: 'transparent',
                        color: '#333',
                        hover: {
                            background: 'transparent',
                            color: '#222',
                        },
                    }
                },
                button: {
                    background: '#fff',
                    color: '#999',
                    hover: {
                        background: '#f9f9f9',
                        color: '#555',
                    }
                },
            },
            button: {
                background: '#fff',
                color: '#555',
                hover: {
                    background: '#f9f9f9',
                    color: '#222',
                }
            },
        },
        month: {
            button: {
                background: '#fff',
                color: '#555',
                hover: {
                    background: '#f9f9f9',
                    color: '#222',
                }
            },
            selector: {
                background: 'rgba(255,255,255,0.95)',
                button: {
                    background: 'transparent',
                    color: '#777',
                    hover: {
                        background: '#f5f5f5',
                        color: '#444',
                    },
                    active: {
                        background: '#c1e2c0',
                        color: '#555',
                        hover: {
                            background: '#b0d8af',
                            color: '#444',
                        },
                    }
                }
            }
        },
        date: {
            background: 'transparent',
            color: '#555',
            hover: {
                background: '#f9f9f9',
                color: '#333',
            },
            active: { 
                background: '#ed1f4f',
                color: '#fff',
                hover: {
                    background: '#ed1f4f',
                    color: '#fff',
                }
            },
            highlight: {
                background: '#fde1e7',
                color: '#333',
                hover: {
                    background: '#fde1e7',
                    color: '#333',
                }
            },
            disabled: {
                opacity: 0.4,
                color: '#555',
                background: 'transparent'
            }
        },
        reminder: {
            headerColor: '#666',
            descriptionColor: '#999' 
        }
    }

License

MIT © rinasm