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

    Install

    npm i react-carbon-datepicker

    DownloadsWeekly Downloads

    12

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    276 kB

    Total Files

    6

    Last publish

    Collaborators

    • rinas