directus-extension-daterange-picker

Date range picker interface for Directus. It stores a start and end date in a JSON field and renders a Directus-styled calendar UI powered by reka-ui DateRangePickerRoot.

Features

• Select a date range from a popup calendar
• Show one or two months at a time
• Keyboard-friendly segmented date input
• Locale-aware labels and formatting based on the current Directus user language, with browser locale fallback
• Monday as the first day of the week
• Optional time display in the formatted input value
• 12-hour or 24-hour time formatting
• Optional seconds in the formatted input value
• Custom display formats via date-fns
• Clear button for resetting the selected range
• Directus theme variables for light and dark mode support
• JSON storage format:

{ "start": "2024-06-01", "end": "2024-06-15" }

Compatibility

This extension is built with the Directus Extensions SDK 12 and is intended for Directus 12 projects.

| Directus | Status | | --- | --- | | 12.x | Supported target | | 11.x | Not tested | | 10.x | Not tested |

Installation

Directus Marketplace

Once the package is published and indexed by the Directus Extensions Registry, install it from the Directus Marketplace in your project settings.

Search for:

directus-extension-daterange-picker

Restart Directus after installation if your deployment does not restart automatically.

npm

Install the package in your Directus project:

npm install directus-extension-daterange-picker

Restart Directus so it can discover the interface.

Manual Installation

Build the extension and copy it into your Directus extensions directory:

npm install
npm run build

Example Directus layout:

extensions/
└── daterange-picker/
    ├── dist/
    │   └── index.js
    └── package.json

After copying the extension, restart Directus so it can discover the interface.

Publishing

Before publishing a new release:

npm run build
npm pack --dry-run

The packed package should include:

• dist/index.js
• README.md
• LICENSE
• package.json

Publish to npm:

npm publish --access public

The Directus Extensions Registry indexes npm packages periodically. After indexing, the latest published version should appear in the Directus Marketplace.

Field Setup

Create or edit a field with these settings:

• Type: JSON
• Interface: Date Range Picker
• Interface group: Selection

The stored value is either null or an object with ISO date strings:

{
  "start": "2024-06-01",
  "end": "2024-06-15"
}

Interface Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | Months Shown | 1 or 2 | 2 | Number of calendar months shown in the popup. | | Include Time | boolean | false | Shows time in the formatted input value. The stored value remains date-only. | | Format | long, short, or custom pattern | long | Controls the displayed date format. Custom patterns use date-fns, for example dd.MM.yyyy or yyyy-MM-dd. | | Include Seconds | boolean | false | Includes seconds when time display is enabled. | | Use 24-Hour Format | boolean | true | Uses 24-hour time when time display is enabled. |

Stored Value

The interface emits date-only ISO strings:

{
  "start": "2024-06-01",
  "end": "2024-06-15"
}

When only one side of the range is selected, the other side can be null. Clearing the field emits null.

Filtering Through the API

For range overlap queries, compare the stored JSON keys:

const items = await directus.items('bookings').readByQuery({
  filter: {
    'period->start': { _lte: '2024-06-30' },
    'period->end': { _gte: '2024-06-01' },
  },
});

Development

npm install
npm run dev
npm run build

Known Limitations

• Min Date, Max Date, and Display Mode are currently exposed as interface options, but are not wired into the component behavior yet.
• Time options affect only the displayed input formatting. The stored value is still date-only.