rc-calendar-picker

React Calendar

A lightweight but complete calendar picker react component.

API

Name	Type	Default	Description
value	Dayjs	undefined	Represents the selected date by the component, in order to use it as a controlled component. This prop is parsed by dayjs, so it is possible to use a date string or a dayjs object.
initialValue	Dayjs	undefined	Represents the selected date for the component to use it as a uncontrolled component. This prop is parsed by Dayjs, so it is possible to use a date string or a dayjs object. If you need to set the selected date programmatically after the picker is initialized, please use the value prop instead.
initialViewMode	string	day	The default view to display when the picker is shown for the first time ('year', 'month', 'day', 'time'). If you want to set the view mode after the component has been initialize see the imperative API.
showInput	boolean	true	Whether to show an input field to edit the date manually.
open	boolean	undefined	Whether to open or close the picker. If not set react-calendar will open the datepicker on input focus and close it on click outside.
timezoneOffset	number	undefined	Specifies the timezone offset in hours, the input parameters will be adjusted based on the timezone offset after being passed in, it will also affect the result value
closeOnSelect	boolean	false	When true, once the day has been selected, the datepicker will be automatically closed.
className	string or string[]	''	Extra class name for the outermost markup element.
inputProps	object	undefined	Defines additional attributes for the input element of the component. For example: onClick, placeholder, disabled, required, name and className (className sets the class attribute for the input element). See Customize the Input Appearance.
dateFormat	string | boolean	LTS	Defines the format for the date. It accepts any dayjs date format. If it hasn't been set the date will be displayed using the defaults for the current locale.
timeFormat	string | boolean	L	Defines the format for the time. It accepts any dayjs time format. If it hasn't been set the time will be displayed using the defaults for the current locale.
viewMode	ViewMode | undefined	undefined	Only display single mode
closeOnClickOutside	boolean	true	When the calendar is open and closeOnClickOutside is true (its default value), clickin outside of the calendar or input closes the calendar. If false the calendar stays open.
timeLimit	string	hh:mm:ss	Restrict the selectable time granularity.
showTime	boolean	false	Whether to select the time.
isEndDate	boolean	false	This setting is required only when you are using two calendar components to select a time range. This parameter is used to affect whether the range style is displayed.
siblingDate	DayJs	undefined	This parameter is used to determine and highlight the start date/end date. It is typically used in conjunction with isEndDate and is only needed when you want to build the capability for range selection.
isValidDate	function	() => boolean	Define the dates that can be selected. The function receives (currentDate, selectedDate) and shall return a true or false whether the currentDate is valid or not. See selectable dates.
timeConstraints	TimeConstraintsType	undefined	It is used to constrain the maximum and minimum values of hours, minutes, and seconds, as well as their respective step sizes.
onOpen	function	empty function	Callback trigger for when the user opens the calendar.
onChange	function	empty function	Callback trigger when the date changes. The callback receives the selected dayjs object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string).
onClose	function	empty function	Callback trigger for when the calendar get closed. The callback receives the selected dayjs object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback returns the value in the input.
onBeforeNavigate	function	( nextView, currentView, viewDate ) => nextView	Allows to intercept a change of the calendar view. The accepted function receives the view that it's supposed to navigate to, the view that is showing currently and the date currently shown in the view. Return a viewMode ( default ones are year, month, day or time) to navigate to it. If the function returns a "falsy" value, the navigation is stopped and we will remain in the current view.
onNavigate	function	empty function	Callback trigger when the view mode changes. The callback receives the selected view mode string (year, month, day or time) as only parameter.
onNavigateForward	function	empty function	Callback trigger when the user navigates to the next month, year or decade. The callback receives the amount and type ('month', 'year') as parameters.
onNavigateBack	function	empty function	Callback trigger when the user navigates to the previous month, year or decade. The callback receives the amount and type ('month', 'year') as parameters.

How to use

1. Basic demo
2. isValidDate prop demo
3. DateFormat & timeFormat demo
4. ViewMode demo

Develop

pnpm i

npm run dev

Test

npm run test

npm run coverage

LICENSE

This repository is published under MIT license