Aqua Basis

AqDatePicker Interfaces

This section documents the core interfaces that shape the configuration and behavior of AqTable. These TypeScript definitions extend the native capabilities of the TanStack Table API, enabling deeper control over layout, interaction, and rendering.

ICalendarInstance

Each instance holds a unique identifier and its corresponding date value. This is useful for rendering multiple calendar views, like in range pickers or linked calendars.

{
  uid: string;
  value: string;
}

Key	Description	Example
`uid`	Unique identifier for the calendar instance. It is used to differentiate between calendars when multiple are rendered.	`"calendar-01"`
`value`	The current value associated with the calendar. Usually a date in ISO string format (e.g., `"2025-07-29"`).	`"2025-07-29"`

IDateValue

Interface that will set the global characteristics of the table, could enable or disable other characteristics at global level and modify the table header.

// IDateValue.ts
{
  start: string;
  end: string;
  hover?: string;
}

Key	Description	Example
`start`	The initial date selected in the range, represented as an ISO string.	`"2025-07-01"`
`end`	The final date selected in the range, also as an ISO string.	`"2025-07-15"`
`hover?`	(Optional) Temporary date under the user's cursor during selection.	`"2025-07-10"`

IRange

Defines a dynamic object where each key is a translation label (e.g., "today", "last7Days"), and its value is an array of DateTime objects (from Luxon) representing a date range.

// IDateValue.ts
{
  [date: string]: DateTime[];
}

Key	Description	Example
`[key: string]`	Translation key used as label in UI.	`"last7Days"`
`DateTime[]`	Array of two `DateTime` objects: `[startDate, endDate]`.	`[DateTime.now().minus({ days: 6 }), DateTime.now()]`

IMonthSelection

Represents a specific month and year combination, often used for month/year pickers or navigation logic within the date picker.

// IDateValue.ts
{
  month: number;
  year: number;
}

Key	Description	Example
`month`	Month number (1–12). January is `1`, December is `12`.	`7`
`year`	Full year number in `YYYY` format.	`2025`

IDatePickerTranslation

This interface ensures localization and accessibility by allowing full customization of labels, placeholders, summaries, and range names.

// ITranslations.ts
{
  // Common
  today: string;
  clear: string;
  cancel: string;
  apply: string;

  // Months
  months: {
    january: string;
    february: string;
    march: string;
    april: string;
    may: string;
    june: string;
    july: string;
    august: string;
    september: string;
    october: string;
    november: string;
    december: string;
  };

  // Weekdays
  weekdays: {
    sunday: string;
    monday: string;
    tuesday: string;
    wednesday: string;
    thursday: string;
    friday: string;
    saturday: string;
  };

  // Range
  range: {
    start: string;
    end: string;
    range: string;
  };

  // Timer:
  timeWrapper: {
    start: string;
    end: string;
  };

  rangeSelection: {
    'today': string;
    'yesterday': string;
    'last 7 days': string;
    'last 30 days': string;
    'this month': string;
    'last month': string;
    'custom': string;
  };
}

On this page

✨ Design together. Build together. Speak the same language. ✨

back Aqua.png