rs-react-datepicker

Date picker pluggin for project 14 : Pass a jQuery library to React

A simple react date picker

1. Installation
2. Examples of use
3. Default option

Installation

You can install rs-react-datepicker with npm: npm i rs-react-datepicker

For import rs-react-datepicker: import {Datepicker} from "rs-react-datepicker"

Examples of use

Example 1: by default

const date = new Date()

<Datepicker
    date = {date}
/>

Example 2: customized

const date = new Date()

const customDatePicker = {
    borderRadius: "5px",
    border: "none",
    backgroundColor: "rgba(240, 67, 41, .3)",
    fontFamily: "Roboto",
    fontSize: "15px",
    padding: "0",
    rowGap: "5px"
}

const customSelectedDay = {
    backgroundColor: "#594B94"
}

const customHeader = {
    borderRadius: "5px 5px 0 0",
    padding: "4px 0",
    backgroundColor: "rgba(240, 67, 41, .5)"
}

const customContainerNumberDay = {
    padding: "4px 0"
}

<Datepicker
    date = {date}
    styleDatePicker = {customDatePicker}
    styleSelectedDay = {customSelectedDay}
    styleHeader = {customHeader}
    styleContainerNumberDay = {customContainerNumberDay}
/>

Default option

Default content

Datepicker.defaultProps = {
    doubleLeft: DoubleLeft, // To change the default double left image
    doubleRight: DoubleRight, // To change the default double right image
    id: "default", // To change the default id of the input (id) and if of datepicker (idDatepicker)
    label: "", // To change the label
    left: Left, // To change the default left image
    onChange:  () => {}, // To add a action when input value change
    placeholder: "" // To change the placeholder
    right: Right, // To change the default right image
    styleArrow: {}, // To customize the img style
    styleContainerNameDay: {}, // To customize the container style that contains the day names
    styleContainerNumberDay: {}, // To customize the container style that contains the day numbers
    styleDatePicker: {}, // To customize the datepicker container style
    styleHeader: {}, // To customize the header style of datepicker
    styleHover: {}, // To customize the hover day style
    styleInput: {}, // To customize the input
    styleLabel: {} // To change the label style
    styleMonth: {}, // To customize the style of the month displayed
    styleNameDay: {}, // To customize the style of the day names
    styleNumberDay: {}, // To customize the style of the days of the current month
    styleOutsideDay: {}, // To customize the style of days that do not belong to the current month
    stylePlaceholder: {} // To change the placeholder style
    styleSelectedDay: {}, // To customize the selected day style
    styleYear: {}, // To customize the style of the year displayed
}

Default type

Datepicker.propTypes = {
    date: PropTypes.instanceOf(Date).isRequired, // REQUIRED - To set up date
    doubleLeft: PropTypes.string,
    doubleRight: PropTypes.string,
    id: PropTypes.string, 
    label: PropTypes.string,
    left: PropTypes.string,
    onChange: PropTypes.func,
    placeholder: PropTypes.string,
    right: PropTypes.string,
    styleArrow: PropTypes.object,
    styleContainerNameDay: PropTypes.object,
    styleContainerNumberDay: PropTypes.object,
    styleDatePicker: PropTypes.object,
    styleHeader: PropTypes.object,
    styleHover: PropTypes.object,
    styleInput: PropTypes.object,
    styleLabel: PropType.object,
    styleMonth: PropTypes.object,
    styleNameDay: PropTypes.object,
    styleNumberDay: PropTypes.object,
    styleOutsideDay: PropTypes.object,
    stylePlaceholder: PropTypes.object,
    styleSelectedDay: PropTypes.object,
    styleYear: PropTypes.object,
}