react-carbon-datepicker

1.0.3 • Public • Published

react-carbon-datepicker

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

NPM JavaScript Style Guide

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

Package Sidebar

Install

npm i react-carbon-datepicker

Weekly Downloads

4

Version

1.0.3

License

MIT

Unpacked Size

276 kB

Total Files

6

Last publish

Collaborators

  • rinas