React XFLEX Date Picker

A very simple react datepicker component which includes range picker. Now supports server side rendering.

Installation

The package can be installed via NPM:

npm install react-xflex-datepicker --save

Or yarn:

yarn add react-xflex-datepicker

Usage

1. Datepicker component for choosing only one date:

import { XFlexDatepicker } from 'react-xflex-datepicker';

2. Daterange picker component:

import { XFlexDatepickerRange } from 'react-xflex-datepicker';

Then you can use it in your code:

<XFlexDatepicker />

or

<XFlexDatepickerRange />

Styles need to be imported separately.

import 'react-xflex-datepicker/dist/xflex-datepicker.css';

Options

Datepicker

moment is required for some of the options

Option	Type	Values	Default	Description
initialDate	Moment	moment dates, null	moment() (Current date)	This is the initial date set on the calendar on mount.
position	String	top, bottom	bottom	It tells where the calendar will be positioned regarding the input control. This property has no effect when inputControl is set to false.
inputControl	Boolean	true, false	true	When is set to false, the calendar will be visible all the time, otherwise it will be opened by a button.
placeholder	String	any	Choose date...	This is the placeholder on the input control when no date is selected. It has no effect when inputControl is set to false.
String	moment formats (see momentjs webpage for available formats)	YYYY, MMMM DD	The format in which the dates will be shown on the input control. Has no effect when inputControl is set to false.
locale	String	moment locale	en	The locale of the calendar. This does not affect the placeholder
buttonControlClassName	String	any className	''	This is optional className for the button control for custom styling.

Datepicker Range

Range datepicker has the same above options as the datepicker and a few more:

Option	Type	Values	Default	Description
hasTooltip	Boolean	true, false	true	Whether or not to have an info tooltip on day mouseover
tooltipLabel	Function	functions	(numberOfNights) => {return numberOfNights}	Provided this function, you can set a custom label for the day tooltip. It receives number of nights between the days selected.

Events

Event	Arguments	Description
onChooseDate	date: Moment object	Fired when clicked on a date. On datepicker it fires with {date: Moment} and on range picker with {start: Moment, end: Moment | null. The end date is null if the event is fired when selecting the start date.
onClearDate	date: Moment object	Fired when cleared a date from the input control. On datepicker it fires with {date: Moment} and on range picker with {start: Moment, end: Moment | null. The object tells which dates have been cleared. The end date is null if the event is fired when only the start date is selected.
onCalendarShow	none	Fired when the calendar is shown. Only when inputControl is false
onCalendarHide	none	Fired when the calendar is hidden. Only when inputControl is false
onMonthDayOver	date: Moment object	Fired when mouseover on a date. The argument is a Moment object which represents the date that has been hovered.

License

ISC