EodashDatePicker ​

A calendar for picking the global date, built on eox-timecontrol. Every date with data gets a dot, coloured per collection, compare side included. Picking a date updates the global datetime that map layers follow.

The date field steps through available dates one at a time. The buttons on either side jump straight to the oldest or latest.

Example ​

Default usage:

js
{
  id: "date-picker",
  title: "Date",
  type: "internal",
  layout: { x: 3, y: 9, w: 3, h: 3 },
  widget: {
    name: "EodashDatePicker",
    properties: {},
  },
}

In compact mode the calendar stays closed until you hover or click the date field:

js
widget: {
  name: "EodashDatePicker",
  properties: {
    toggleCalendar: true,
  },
}

Customize time display and popup item details:

js
widget: {
  name: "EodashDatePicker",
  properties: {
    showTime: true,
    timeFormat: "YYYY-MM-DD HH:mm",
    itemTitleKey: "title",
  },
}

Properties ​

hideArrows? ​

Hide the step arrows next to the date input field.

ts
optional hideArrows?: boolean = false;

hideInputField? ​

Hide the date input field.

ts
optional hideInputField?: boolean = false;

itemTitleKey? ​

Property key on timeline items used as the primary title in popup cards.

ts
optional itemTitleKey?: string = undefined;

propertyTransform? ​

Transformation function for popup card items.

ts
optional propertyTransform?:
  | ((item) => string | false | TimeControlPopupItem | null)
  | null = null;

showItems? ​

Whether to show items list in the calendar popup.

ts
optional showItems?: boolean = true;

showTime? ​

Whether to show time in the calendar popup items.

ts
optional showTime?: boolean = true;

timeFormat? ​

Format string used for time display.

ts
optional timeFormat?: string = "YYYY-MM-DD HH:mm";

toggleCalendar? ​

When true, keeps calendar closed until hovered or clicked (compact mode).

ts
optional toggleCalendar?: boolean = false;

See also ​