Date Picker

Overview

The HeadlessDatePicker component is a versatile date picker component for React applications. It allows for easy date selection and customization.

Installation

To install the HeadlessDatePicker component, use npm or yarn:

npm install @locoworks/reusejs-react-date-picker
# or
yarn add @locoworks/reusejs-react-date-picker

External Dependencies

The HeadlessDatePicker component relies on external dependencies such as @locoworks/reusejs-toolkit-react-hooks. Ensure you have these dependencies installed in your project.

Importing

Import the HeadlessDatePicker component into your React application as follows:

import { HeadlessDatePicker, CalendarBaseClassesProps } from "@locoworks/reusejs-react-date-picker";

Types/ Exported Components

The component exports the following types and components:

• HeadlessDatePicker : The main component to create a datePicker
• CalendarBaseClassesProps : A type for customizing the calendar's appearance.

Props

The HeadlessDatePicker component accepts the following props:

• defaultValue (optional): The default date value (default: current date).
• minDate (optional): The minimum selectable date (default: January 1, 1000).
• maxDate (optional): The maximum selectable date.
• dateFormat (optional): The date format for the input field (default: "MM/dd/yyyy").
• label (optional): The label for the date picker.
• inputWrapperClasses (optional): Additional classes for the input wrapper.
• inputClasses (optional): Additional classes for the input field.
• labelClasses (optional): Additional classes for styling label field.
• suffix (optional): A React node to be displayed as a suffix in the input field.
• suffixWrapperClasses (optional): Additional classes for the suffix wrapper.
• calendarContainerClasses (optional): Additional classes for the calendar container.
• invalidDateClasses (optional): Additional classes for the input when the date is invalid.
• prevMonthLabel (optional): A React Component on calendar for navigating to previous month.
• nextMonthLabel (optional): A React Component on calendar for navigating to next month.
• prevYearLabel (optional): A React component used in the calendar to navigate to the previous set of 10 years.
• nextYearLabel (optional): A React component used in the calendar to navigate to the next set of 10 years.
• dateCallback (optional): A callback function for accessing the selected date.
• calendarBaseClasses (optional): Props for customizing the calendar appearance.

CalendarBaseClassesProps Props

CalendarBaseClassesProps is an interface that allows you to customize the appearance of the calendar, including the year and month selector components. It includes the following props:

• calendarWrapperClasses : CSS classes for the calendar wrapper.
• calendarHeaderButtonsWrapper : CSS classes for the header buttons wrapper.
• headerButtonClasses : CSS classes for the header buttons.
• singleCalenderSectionWrapper : CSS classes for the single calendar section wrapper.
• calendarWeeksClasses : CSS classes for the calendar weeks section .
• calendarHeaderClasses : CSS classes for the month name.
• weekNameWrapper : CSS classes for the week name wrapper.
• weekNameClasses : CSS classes for the week name.
• selectableClasses : CSS classes for selectable dates.
• selectedOrTodayClasses : CSS classes for selected or today's dates.
• weekendClasses : CSS classes for weekend dates.
• notCurrentMonthClasses : CSS classes for dates not in the current month.
• selectedTextClasses : CSS classes for the selected date text.
• selectableTextClasses : CSS classes for the selectable date text.
• todayButNotSelectedClasses : CSS classes for today's date when not selected.

Year and Month Selector Props

• yearSelectorWrapperClasses : CSS classes for styling the year selector wrapper.
• yearSelectorHeaderWrapperClasses : CSS classes for styling the header wrapper of the year selector.
• yearSelectorHeaderClasses : CSS classes for styling the header of the year selector.
• yearsContainerClasses : CSS classes for styling the container of the selectable years.
• yearClasses : CSS classes for styling individual years.
• monthSelectorWrapperClasses : CSS classes for styling the month selector wrapper.
• monthsContainerClasses : CSS classes for styling the container of the selectable months.
• monthClasses : CSS classes for styling individual months.

Usage/Examples

Sample Code Demo

import React from "react";
import {
	HeadlessDatePicker,
	CalendarBaseClassesProps,
} from "@locoworks/reusejs-react-date-picker";

const Example: React.FC = () => {
	const calendarClasses: CalendarBaseClassesProps = {
		calenderHeaderButtonsWrapper: "bg-gray-50",
	};

	const printer = (date: Date) => {
		console.log("Date", date);
		setSelectedDate(date);
	};
	const [selectedDate, setSelectedDate] = React.useState<any>("");

	return (
		<div className="flex flex-col gap-y-2 items-center justify-center py-10 mt-10 border rounded gap-x-3 bg-gray-50">
			<HeadlessDatePicker
				errorText="Error in Date Format!!"
				invalidDateClasses="outline outline-red-500"
				calendarBaseClasses={calendarClasses}
				dateCallback={printer}
			/>
			<button
				className="bg-blue-600 px-4 py-1 rounded-xl text-white font-bold hover:bg-blue-700"
				onClick={() => {
					console.log("SELECTED DATE IS>>>", selectedDate);
				}}
			>
				Show Selected Date
			</button>
		</div>
	);
};

export default Example;

Customised Date Picker

import React from "react";
import { HeadlessDatePicker } from "@locoworks/reusejs-react-date-picker";

const CustomDatePicker: React.FC = () => {
	const CalendarIcon = (
		<svg
			className="w-4 h-4 text-gray-800"
			aria-hidden="true"
			xmlns="http://www.w3.org/2000/svg"
			fill="none"
			viewBox="0 0 20 20"
		>
			<path
				stroke="currentColor"
				strokeLinecap="round"
				strokeLinejoin="round"
				strokeWidth="2"
				d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"
			/>
		</svg>
	);
	const PrevIcon = (
		<svg
			className="w-4 h-4 text-gray-600"
			aria-hidden="true"
			xmlns="http://www.w3.org/2000/svg"
			fill="none"
			viewBox="0 0 14 10"
		>
			<path
				stroke="currentColor"
				strokeLinecap="round"
				strokeLinejoin="round"
				strokeWidth="2"
				d="M13 5H1m0 0 4 4M1 5l4-4"
			/>
		</svg>
	);
	const NextIcon = (
		<svg
			className="w-4 h-4 text-gray-600"
			aria-hidden="true"
			xmlns="http://www.w3.org/2000/svg"
			fill="none"
			viewBox="0 0 14 10"
		>
			<path
				stroke="currentColor"
				strokeLinecap="round"
				strokeLinejoin="round"
				strokeWidth="2"
				d="M1 5h12m0 0L9 1m4 4L9 9"
			/>
		</svg>
	);

	return (
		<div className="flex flex-col items-center justify-center py-10 mt-10 border rounded gap-x-3 bg-gray-50">
			<HeadlessDatePicker
				label="Select Date"
				labelClasses="text-gray-600"
				datePickerWrapperClasses="w-full flex flex-col items-start gap-y-2"
				suffix={CalendarIcon}
				errorText="Error Text"
				inputClasses="p-2"
				invalidDateClasses="outline outline-red-500"
				nextMonthLabel={NextIcon}
				prevMonthLabel={PrevIcon}
				prevYearLabel={PrevIcon}
				nextYearLabel={NextIcon}
			/>
		</div>
	);
};

export default CustomDatePicker;

Styling

You can style the component using Tailwind CSS and CSS. Feel free to customize the component's appearance as per your project's requirements.

Props

CalendarBaseClassesProps Props

CalendarBaseClassesProps is an interface that allows you to customize the appearance of the calendar. It includes the following props:

Notes

Date formats supported by the HeadlessDatePicker component include:

• dd/MM/yyyy
• MM/dd/yyyy
• yyyy/MM/dd
• dd-MM-yyyy
• MM-dd-yyyy
• yyyy-MM-dd
• dd MM yyyy
• MM dd yyyy
• yyyy MM dd