A comprehensive React datepicker component that enables developers to create intuitive date and time selection interfaces for web applications.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Comprehensive date manipulation, formatting, and calculation functions built on date-fns for working with dates in JavaScript applications.
Functions for creating and parsing Date objects with proper validation.
/**
* Create a new Date instance with fallback to current date
* @param value - String, Date, number, or null/undefined
* @returns Valid Date object
*/
function newDate(value?: string | Date | number | null): Date;
/**
* Parse date string with format and locale support
* @param value - Date string to parse
* @param dateFormat - Format string or array of formats
* @param locale - Locale for parsing
* @param strictParsing - Whether to use strict parsing
* @param refDate - Reference date for relative parsing
* @returns Parsed Date or null if invalid
*/
function parseDate(
value: string,
dateFormat: string | string[],
locale?: Locale,
strictParsing?: boolean,
refDate?: Date
): Date | null;Functions for validating Date objects and checking date properties.
/**
* Check if value is a Date object
* @param value - Value to check
* @returns True if value is Date
*/
function isDate(value: any): value is Date;
/**
* Check if date is valid and within acceptable range
* @param date - Date to validate
* @param minDate - Optional minimum date (defaults to 1/1/1800)
* @returns True if date is valid
*/
function isValid(date: Date, minDate?: Date): boolean;
/**
* Set multiple date properties at once
* @param date - Source date
* @param values - Object with date properties to set
* @returns New Date with set properties
*/
function set(date: Date, values: {
year?: number;
month?: number;
date?: number;
hours?: number;
minutes?: number;
seconds?: number;
milliseconds?: number;
}): Date;Functions for formatting dates with locale support.
/**
* Format date with locale support
* @param date - Date to format
* @param formatStr - Format string
* @param locale - Locale for formatting
* @returns Formatted date string
*/
function formatDate(date: Date, formatStr: string, locale?: Locale): string;
/**
* Safely format date (handles null/undefined)
* @param date - Date to format (can be null/undefined)
* @param options - Formatting options
* @returns Formatted string or empty string
*/
function safeDateFormat(
date: Date | null | undefined,
options: { dateFormat: string | string[]; locale?: Locale }
): string;
/**
* Format date range with separator
* @param startDate - Start date
* @param endDate - End date
* @param props - Formatting options with separator
* @returns Formatted date range string
*/
function safeDateRangeFormat(
startDate: Date | null | undefined,
endDate: Date | null | undefined,
props: {
dateFormat: string | string[];
locale?: Locale;
rangeSeparator?: string;
}
): string;
/**
* Format multiple selected dates
* @param dates - Array of dates
* @param props - Formatting options
* @returns Formatted dates string
*/
function safeMultipleDatesFormat(
dates: Date[],
props: { dateFormat: string | string[]; locale?: Locale }
): string;Functions for extracting date components.
/**
* Get seconds from date (0-59)
*/
function getSeconds(date: Date): number;
/**
* Get minutes from date (0-59)
*/
function getMinutes(date: Date): number;
/**
* Get hours from date (0-23)
*/
function getHours(date: Date): number;
/**
* Get day of month (1-31)
*/
function getDate(date: Date): number;
/**
* Get day of week (0-6, Sunday = 0)
*/
function getDay(date: Date): number;
/**
* Get ISO week number (1-53)
*/
function getWeek(date: Date): number;
/**
* Get month (0-11, January = 0)
*/
function getMonth(date: Date): number;
/**
* Get quarter (1-4)
*/
function getQuarter(date: Date): number;
/**
* Get full year
*/
function getYear(date: Date): number;
/**
* Get timestamp in milliseconds
*/
function getTime(date: Date): number;
/**
* Get localized day of week abbreviation
* @param day - Date object
* @param locale - Locale for formatting
* @returns Day abbreviation (e.g., "Mon", "Tue")
*/
function getDayOfWeekCode(day: Date, locale?: Locale): string;Functions for setting date components.
/**
* Set time components on date
* @param date - Source date
* @param time - Time components to set
* @returns New Date with set time
*/
function setTime(
date: Date,
time: { hour?: number; minute?: number; second?: number }
): Date;
/**
* Set hours (0-23)
*/
function setHours(date: Date, hours: number): Date;
/**
* Set minutes (0-59)
*/
function setMinutes(date: Date, minutes: number): Date;
/**
* Set seconds (0-59)
*/
function setSeconds(date: Date, seconds: number): Date;
/**
* Set month (0-11)
*/
function setMonth(date: Date, month: number): Date;
/**
* Set quarter (1-4)
*/
function setQuarter(date: Date, quarter: number): Date;
/**
* Set year
*/
function setYear(date: Date, year: number): Date;Functions for getting start and end boundaries of time periods.
/**
* Get start of day (00:00:00.000)
*/
function getStartOfDay(date: Date): Date;
/**
* Get start of week with locale support
* @param date - Source date
* @param locale - Locale for week start day
* @param calendarStartDay - Override for week start day (0-6)
*/
function getStartOfWeek(
date: Date,
locale?: Locale,
calendarStartDay?: number
): Date;
/**
* Get first day of month
*/
function getStartOfMonth(date: Date): Date;
/**
* Get first day of year
*/
function getStartOfYear(date: Date): Date;
/**
* Get first day of quarter
*/
function getStartOfQuarter(date: Date): Date;
/**
* Get start of today
*/
function getStartOfToday(): Date;
/**
* Get end of day (23:59:59.999)
*/
function getEndOfDay(date: Date): Date;
/**
* Get end of week
*/
function getEndOfWeek(date: Date): Date;
/**
* Get last day of month
*/
function getEndOfMonth(date: Date): Date;Functions for adding and subtracting time periods.
/**
* Add days to date
*/
function addDays(date: Date, amount: number): Date;
/**
* Add weeks to date
*/
function addWeeks(date: Date, amount: number): Date;
/**
* Add months to date
*/
function addMonths(date: Date, amount: number): Date;
/**
* Add quarters to date
*/
function addQuarters(date: Date, amount: number): Date;
/**
* Add years to date
*/
function addYears(date: Date, amount: number): Date;
/**
* Add hours to date
*/
function addHours(date: Date, amount: number): Date;
/**
* Add minutes to date
*/
function addMinutes(date: Date, amount: number): Date;
/**
* Add seconds to date
*/
function addSeconds(date: Date, amount: number): Date;
/**
* Subtract days from date
*/
function subDays(date: Date, amount: number): Date;
/**
* Subtract weeks from date
*/
function subWeeks(date: Date, amount: number): Date;
/**
* Subtract months from date
*/
function subMonths(date: Date, amount: number): Date;
/**
* Subtract quarters from date
*/
function subQuarters(date: Date, amount: number): Date;
/**
* Subtract years from date
*/
function subYears(date: Date, amount: number): Date;Functions for comparing dates and checking relationships.
/**
* Check if date is after another date
*/
function isAfter(date: Date, dateToCompare: Date): boolean;
/**
* Check if date is before another date
*/
function isBefore(date: Date, dateToCompare: Date): boolean;
/**
* Check if dates are equal
*/
function isEqual(date: Date, dateToCompare: Date): boolean;
/**
* Check if dates are the same day
*/
function isSameDay(date: Date, dateToCompare: Date): boolean;
/**
* Check if dates are in the same month
*/
function isSameMonth(date: Date, dateToCompare: Date): boolean;
/**
* Check if dates are in the same year
*/
function isSameYear(date: Date, dateToCompare: Date): boolean;
/**
* Check if dates are in the same quarter
*/
function isSameQuarter(date: Date, dateToCompare: Date): boolean;
/**
* Check if day is within date range (inclusive)
*/
function isDayInRange(
day: Date,
startDate: Date,
endDate: Date
): boolean;
/**
* Check if date is before another with midnight comparison
*/
function isDateBefore(date: Date, dateToCompare: Date): boolean;Functions for validating dates against constraints and filters.
/**
* Check if day should be disabled based on DatePicker props
* @param day - Date to check
* @param props - DatePicker props with constraints
* @returns True if day should be disabled
*/
function isDayDisabled(day: Date, props: {
minDate?: Date;
maxDate?: Date;
excludeDates?: Date[];
excludeDateIntervals?: Array<{start: Date, end: Date}>;
includeDates?: Date[];
includeDateIntervals?: Array<{start: Date, end: Date}>;
filterDate?: (date: Date) => boolean;
}): boolean;
/**
* Check if month should be disabled
*/
function isMonthDisabled(month: Date, props: any): boolean;
/**
* Check if year should be disabled
*/
function isYearDisabled(year: number, props: any): boolean;
/**
* Check if month is disabled before given date
*/
function monthDisabledBefore(day: Date, props: any): boolean;
/**
* Check if month is disabled after given date
*/
function monthDisabledAfter(day: Date, props: any): boolean;
/**
* Check if quarter is disabled before given date
*/
function quarterDisabledBefore(day: Date, props: any): boolean;
/**
* Check if quarter is disabled after given date
*/
function quarterDisabledAfter(day: Date, props: any): boolean;
/**
* Check if year is disabled before given date
*/
function yearDisabledBefore(day: Date, props: any): boolean;
/**
* Check if year is disabled after given date
*/
function yearDisabledAfter(day: Date, props: any): boolean;
/**
* Check if years are disabled before given date
*/
function yearsDisabledBefore(day: Date, props: any): boolean;
/**
* Check if years are disabled after given date
*/
function yearsDisabledAfter(day: Date, props: any): boolean;Functions for getting effective min/max dates considering all constraints.
/**
* Get effective minimum date considering all constraints
* @param props - DatePicker props
* @returns Effective minimum date
*/
function getEffectiveMinDate(props: {
minDate?: Date;
includeDates?: Date[];
includeDateIntervals?: Array<{start: Date, end: Date}>;
}): Date | undefined;
/**
* Get effective maximum date considering all constraints
* @param props - DatePicker props
* @returns Effective maximum date
*/
function getEffectiveMaxDate(props: {
maxDate?: Date;
includeDates?: Date[];
includeDateIntervals?: Array<{start: Date, end: Date}>;
}): Date | undefined;Helper functions for common date operations.
/**
* Convert highlight dates array to Map for faster lookup
* @param highlightDates - Array of dates or HighlightDate objects
* @returns Map with date keys and HighlightDate values
*/
function getHighLightDaysMap(
highlightDates?: Array<Date | HighlightDate>
): Map<string, HighlightDate>;
/**
* Convert holidays array to Map for faster lookup
* @param holidays - Array of holiday objects
* @returns Map with date keys and holiday values
*/
function getHolidaysMap(holidays?: Array<{date: Date, holidayName: string}>): Map<string, string>;
/**
* Add leading zero to single digit numbers
* @param i - Number to pad
* @returns Padded string
*/
function addZero(i: number): string;
/**
* Get range of years for year picker
* @param date - Current date
* @param yearItemNumber - Number of years to show
* @returns Object with start and end years
*/
function getYearsPeriod(
date: Date,
yearItemNumber?: number
): { startPeriod: number; endPeriod: number };
/**
* Get times to inject after specific time
* @param currentTime - Current time
* @param currentMultiplier - Time multiplier
* @param intervals - Time intervals
* @param injectedTimes - Times to inject
* @returns Array of times to inject
*/
function timesToInjectAfter(
currentTime: Date,
currentMultiplier: number,
intervals: number,
injectedTimes: Date[]
): Date[];Usage Examples:
import {
newDate,
parseDate,
formatDate,
addDays,
isSameDay,
isAfter,
getStartOfWeek,
safeDateFormat
} from "react-datepicker";
// Date creation and parsing
const today = newDate();
const parsedDate = parseDate("2023-12-25", "yyyy-MM-dd", "en");
// Date formatting
const formatted = formatDate(today, "MM/dd/yyyy");
const safeFormatted = safeDateFormat(today, { dateFormat: "PP" });
// Date math
const nextWeek = addDays(today, 7);
const weekStart = getStartOfWeek(today);
// Date comparisons
const isToday = isSameDay(someDate, today);
const isFuture = isAfter(someDate, today);
// Working with date ranges
const isInRange = isDayInRange(checkDate, startDate, endDate);
// Validation
const isValid = isDayDisabled(checkDate, {
minDate: new Date(),
excludeDates: [blackoutDate],
filterDate: (date) => date.getDay() !== 0 // No Sundays
});Install with Tessl CLI
npx tessl i tessl/npm-react-datepicker