@nejadipour/react-modern-datepicker

react-modern-datepicker

A simple and reusable Datepicker component for React.
This package is an updated version of react-modern-calendar-datepicker with some additional features and bug fixes.

Installation

npm install @nejadipour/react-modern-datepicker

Usage

import Datepicker from "@nejadipour/react-modern-datepicker";

export default function Usage() {
    return (
        <Datepicker darkMode locale={"fa"}/>
    )
}

Documentation

You can find the base documentation here. Some additional features are added to the original package, you can find the properties details in the table below:

Prop	Type	Default	Description
alwaysOpen	boolean	false	If true, the datepicker will always be open
arrow	boolean	true	If true, the arrow will be shown in the Popover
calendarClassName	String	''	Additional CSS class for the calendar element
calendarRangeBetweenClassName	String	''	Additional CSS class for the range-between day(s) in the range date picker
calendarRangeEndClassName	String	''	Additional CSS class for the range end day in the range date picker
calendarRangeStartClassName	String	''	Additional CSS class for the range start day in the range date picker
calendarSelectedDayClassName	String	''	Additional CSS class for the selected day
calendarTodayClassName	String	''	Additional CSS class for today day
closedView	String	'text'	The view that is shown when the date picker is closed. It can be one of 'text', 'button' and 'input'. alwaysOpen should be False
closedViewClassName	String	''	Additional CSS class for the closed view element
closedViewProps	Object	{}	Additional props for the closed view element based on Ant Design components.
colorPrimary	String	'#1677ff'	The color of selected day in the single date picker and the color of range start and range end in range date picker
colorPrimaryLight	String	'#64a9f9'	The color of range-between days
customDaysClassName	Array	[]	An array of custom class names for your days. Each item is an object which contains day(number), month(number), year(number), and className(string) properties
darkMode	Boolean	False	If True, the date picker will be in dark mode
defaultValue	Object	null	The default value of the date picker. It should be an object with year, month, and day or an string of them separated by the delimiter. Based on the selectionMode, it can be an array or object with from and to
delimiter	String	'-'	The delimiter that separates year, month, and day in the date string. This is shown when the datepicker is closed
disabled	Boolean	False	If True, the date picker will be disabled
disabledDays	Array	[]	An array of disabled calendar days. Disabled days won't be selectable, and they can't be included in a day range. If user tries to select/include them onDisabledDayError will be called
locale	String	'en'	Locale language of the calendar. It can be one of 'fa' or 'en'
maximumDate	Object	null	Specifies the maximum selectable day by user
maximumToday	Boolean	False	If True, the maximum date will be set to today
maximumTomorrow	Boolean	False	If True, the maximum date will be set to tomorrow
minimumDate	Object	null	Specifies the minimum selectable day by user
minimumToday	Boolean	False	If True, the minimum date will be set to today
minimumTomorrow	Boolean	False	If True, the minimum date will be set to tomorrow
onChange	Function	newValue => null	Gets called when the value of the picker changes
onDisabledDayError	Function	disabledDay => null	Gets called when user tries to select/include a disabled day
onRenderReady	Function	() => null	Gets called when the date picker render is ready or changed
placeholder	String	'select' for 'en' and 'انتخاب' for 'fa'	The placeholder of the date picker
placement	String	'bottom'	The placement of the date picker. It can be one of 'top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop' or 'rightBottom'
popover	Boolean	true	If true, the date picker will be open in a popover, else it will be replaced with the closed view
renderFooter	Function	() => null	Renders a footer for the calendar below the days list. You can use this prop to render a "Go to Today" button or anything you'd like to add there.
returnType	String	'string'	The type of the when calling onChange. It can be one of 'string' or 'object'
selectionMode	String	'single'	The selection mode of the date picker. It can be one of 'single', 'range', or 'multiple'
selectorEndingYear	Number	current year + 50	The maximum selectable year when user opens the year selector
selectorStartingYear	Number	current year - 100	The minimum selectable year when user opens the year selector
shouldHighlightWeekends	Boolean	false	Determines whether to mark weekend days with red or not. (weekend days are Saturday and Sunday for locale="en" calendar and Friday for locale="fa" calendar)
slideAnimationDuration	String	'0.4s'	Duration of month slide animation. It can be any CSS valid time value
trigger	String	"click"	The trigger of the date picker to open/close it. It can be one of "click", "hover", "focus" or "contextMenu"
wrapperClassName	String	''	Additional CSS class for the date picker wrapper element