Aqua Basis

AqDatePicker Constants

The AqDatePickercomponent relies on a set of predefined constants to manage its default behavior, labels, and date handling logic.

These constants are essential for customizing localization, managing selection states, and configuring default values for days, hours, and range presets.

WEEK_DAYS

Represents the default names of the days of the week, starting from Monday and ending on Sunday.

// date.ts
[
	'monday',
	'tuesday',
	'wednesday',
	'thursday',
	'friday',
	'saturday',
	'sunday'
]

HOURS_DAYS

Represents the list of 24-hour formatted strings used in the date picker, ranging from '00' to '23'.

// date.ts
[
	'00', '01',
	'02', '03',
	'04', '05',
	'06', '07',
	'08', '09',
	'10', '11',
	'12', '13',
	'14', '15',
	'16', '17',
	'18', '19',
	'20', '21',
	'22', '23'
]

DEFAULT_TRANSLATIONS

Defines all the default text strings displayed by the AqDatePicker component. These values follow the IDatePickerTranslation interface and can be customized for different locales or contexts.

// translations.ts
{
  today: 'Today',
  clear: 'Clear',
  cancel: 'Cancel',
  apply: 'Apply',
  months: {
    january: 'January',
    february: 'February',
    march: 'March',
    april: 'April',
    may: 'May',
    june: 'June',
    july: 'July',
    august: 'August',
    september: 'September',
    october: 'October',
    november: 'November',
    december: 'December',
  },
  weekdays: {
    sunday: 'Sunday',
    monday: 'Monday',
    tuesday: 'Tuesday',
    wednesday: 'Wednesday',
    thursday: 'Thursday',
    friday: 'Friday',
    saturday: 'Saturday',
  },
  range: {
    start: 'Start',
    end: 'End',
    range: 'Range',
  },
  timeWrapper: {
    start: 'Start',
    end: 'End',
  },
  rangeSelection: {
    'today': 'today',
    'yesterday': 'yesterday',
    'last 7 days': 'last 7 days',
    'last 30 days': 'last 30 days',
    'this month': 'this month',
    'last month': 'last month',
    'custom': 'custom',
  },
}

RANGES

Defines a set of default date range options based on the IRangeinterface Each key corresponds to a label from the DEFAULT_TRANSLATIONS object, and each value is a and the value luxon function (such as *DateTime*.*now*()) that dynamically generates the date range.

{
  [DEFAULT_TRANSLATIONS.rangeSelection['today']]: [getDateNow().startOf('day'), getDateNow().endOf('day')],
  [DEFAULT_TRANSLATIONS.rangeSelection['yesterday']]: [getDateNow().minus({ days: 1 }).startOf('day'), getDateNow().minus({ days: 1 }).endOf('day')],
  [DEFAULT_TRANSLATIONS.rangeSelection['last 7 days']]: [getDateNow().minus({ days: 7 }).startOf('day'), getDateNow().endOf('day')],
  [DEFAULT_TRANSLATIONS.rangeSelection['last 30 days']]: [getDateNow().minus({ days: 29 }).startOf('day'), getDateNow().endOf('day')],
  [DEFAULT_TRANSLATIONS.rangeSelection['this month']]: [getDateNow().startOf('month'), getDateNow().endOf('day')],
  [DEFAULT_TRANSLATIONS.rangeSelection['last month']]: [getDateNow().minus({ months: 1 }).startOf('month'), getDateNow().minus({ months: 1 }).endOf('month')],
  [DEFAULT_TRANSLATIONS.rangeSelection['custom']]: [],
}

SELECTION

Defines the current selection state used by the date picker component. Based on the SelectionMode enum, it manages the mode of interaction and the selected dates.

{
  mode: SELECTION_MODE.NONE,
  date: { start: '', end: '', hover: '' },
}

mode: Defines the selection behavior (NONE, SINGLE, RANGE, etc.).
date.start: Stores the starting date of the selection.
date.end: Stores the ending date of the selection (used in range mode).
date.hover: Temporarily holds the date under the user's cursor (for interactive feedback).

On this page

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

back Aqua.png