CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-datepicker

A comprehensive React datepicker component that enables developers to create intuitive date and time selection interfaces for web applications.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

date-utilities.mddocs/

Date Utilities

Comprehensive date manipulation, formatting, and calculation functions built on date-fns for working with dates in JavaScript applications.

Capabilities

Date Creation and Parsing

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;

Date Validation

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;

Date Formatting

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;

Date Getters

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;

Date Setters

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;

Start/End Date Functions

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;

Date Math Functions

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;

Date Comparison Functions

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;

Date Validation and Filtering

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;

Effective Date Functions

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;

Utility Functions

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

docs

core-functionality.md

date-utilities.md

index.md

localization.md

tile.json