react-date-picker-component
v5.0.6
Published
React date picker component
Downloads
40
Maintainers
Readme
React Datepicker Component
Installing
npm
In package.json
"react-date-picker-component": "a.b.c"
CLI
npm install react-date-picker-component
Usage
var Datepicker = require("react-date-picker-component");
ReactDOM.render(<Datepicker />, document.getElementById("component"));
Getting value
To retreive selected date you need to pass onChange function which will be triggered each time some date is selected.
function onChangeCallback(selectedDay) { /* some work */ }
ReactDOM.render(<Datepicker onChange={onChangeCallback} />, document.getElementById("component"));
Date range
If you want to have date range option just pass parameter isRange with value true. Then in the on change function you will receive object with properties startDate and endDate.
var isRange = true;
ReactDOM.render(<Datepicker isRange={isRange} />, document.getElementById("component"));
Inline calendar
If you want to have inline calendar, one when you see just date and calendar is displayed bellow after you click on it, just pass isInline parameter with value true.
var isInline = true;
ReactDOM.render(<Datepicker isInline={isInline} />, document.getElementById("component"));
Initial date
For initial selected date pass date object as selectedDate parameter.
var date = new Date();
ReactDOM.render(<Datepicker selectedDate={date} />, document.getElementById("component"));
Initialy displayed month
If you want some month initialy displayed but not selecting some day, you can pass any day from that month as date object as displayMonth prop.
var date = new Date();
ReactDOM.render(<Datepicker displayMonth={date} />, document.getElementById("component"));
Show/hide controls
If you want to hide controls for changing year or month just add showControls property with value of false. By default this property is true.
ReactDOM.render(<Datepicker showControls={false} />, document.getElementById("component"));
Minimum date
You can define minimum possible date by passing minimumDate flag.
var minumumDate = new Date();
ReactDOM.render(<Datepicker minimumDate={minimumDate} />, document.getElementById("component"));
Localization
For month names localization, you can pass monthLabels property.
var labels = [...];
ReactDOM.render(<Datepicker monthLabels={labels} />, document.getElementById("component"));
For week days names you can pass daysLabels property with array of strings representing days names as value.
var labels = ["monday", "tuesday",...];
ReactDOM.render(<Datepicker daysLabels={labels} />, document.getElementById("component"));
Week days names
Week names are enabled by default. If you want to remove them pass showDaysLabels property with value false. Names are in table head element, each one in th element with class dayLabel.
ReactDOM.render(<Datepicker showDaysLabels={false} />, document.getElementById("component"));
Styling
Currently there are three ways of styling for date picker. You can use default which can be downloaded from github in CSS or SASS format. This is not recomended because it is just some default format. You can add custom style to directive as parameter or write your CSS. Last two methodes are described belowe.
Structure
Whole component is in div element with class datepicker. Inside there are two elements in first depth level. Div with class header where is displayed selected date in format DD/MM/YYY. Next is table with class calendar. Inside we have caption with class controls which contains two divs (one for month changing and one for year changing) with two more elements. Moving into past element with class prev and into future with class next. Each week is table row with class week. Each day has class day. If day is not possible to be clicked it has class disabled, and selected day has class selected. Week days names are in thead element. Each label is th element and they are inside of one tr element. Each th element has dayLabel class.
Styling as component parameter
To add some style to part of component you can pass JSON object for styling as customStyle property. Using classes as keys you choose which part will have which style. Important thing is that React uses camel case for property names so in you styling definition you will not have font-weight but fontWeight.
var customStyle = {
header: {
"color": "blue",
"fontWeight": "bold"
}
}
ReactDOM.render(<Datepicker customStyle={customStyle} />, document.getElementById("component"));
Styling as CSS
You can use this structure and usual CSS selectors for styling this component. So for styling day element you can use .day selector or .day.selected for selected day. This is recomended usage because like this you can use different pseudoselectors like :hover and you can use media queries.
Note
This component is ready to use as npm module or as script which can be also find in github repository. However, if you do find any issues, please do contact me. Also if you are using it I would appreciate if you could let me know how it is working for you.