Superset Custom Date Filters

Custom date and month picker filters for Apache Superset 6.0.0-rc2, designed to simplify date selection in dashboard filters.

Features

• Single Date Picker: Select a single date instead of a date range. The filter automatically sets both start and end date to the selected date.
• Month Picker: Select an entire month directly. The filter automatically sets the date range to the first and last day of the selected month.
• Compatible with Superset 6.0.0-rc2 frontend

Installation

npm install @superset-custom/date-filters

Usage in Superset

1. Register the Filters in MainPreset

Edit your superset-frontend/src/setup/setupPlugins.ts or equivalent preset file:

import {
  DatePickerPluginControl,
  MonthPickerPluginControl,
} from "@superset-custom/date-filters";

// In your preset configuration, add the controls
export default class MainPreset extends Preset {
  constructor() {
    super({
      name: "Main Preset",
      plugins: [
        // ... other plugins
      ],
    });
  }
}

// Register custom controls
import { getChartControlPanelRegistry } from "@superset-ui/chart-controls";

const controlPanelRegistry = getChartControlPanelRegistry();
controlPanelRegistry.registerValue("DatePickerPlugin", DatePickerPluginControl);
controlPanelRegistry.registerValue(
  "MonthPickerPlugin",
  MonthPickerPluginControl
);

2. Use in Dashboard Filters

Once registered, these filters will be available in your dashboard's native filter configuration:

1. Open a dashboard
2. Click "Add/Edit Filters"
3. Select "Date Picker" or "Month Picker" from the filter type dropdown
4. Configure your filter settings
5. Save and apply

How It Works

Date Picker

• User selects a single date (e.g., 2024-01-15)
• Filter automatically creates a date range:
  • Start: 2024-01-15 00:00:00
  • End: 2024-01-15 23:59:59

Month Picker

• User selects a month (e.g., January 2024)
• Filter automatically creates a date range:
  • Start: 2024-01-01 00:00:00
  • End: 2024-01-31 23:59:59

Development

# Install dependencies
npm install

# Build the package
npm run build

# The compiled code will be in the lib/ directory

License

Apache-2.0