1.2.8 • Published 3 years ago
rs-react-datepicker v1.2.8
rs-react-datepicker
Date picker pluggin for project 14 : Pass a jQuery library to React
A simple react date picker
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,
}