Skip to main content

odsl-range-selector

Description​

The odsl-range-selector component creates a panel with selectable ranges and dates.

Attributes​

includeTime​

If the includeTime attribute is added, the dates allow you to select both a date and time.

forbidOverride​

If the forbidOverride attribute is added, the user cannot make changes to the dates and can only select one of the pre-defined ranges.

simple​

If the simple attribute is added, only the list of ranges is shown.

field​

The name of the date field you are going to use this range selector for. This is used when getting the selected range as a filter.

ranges​

An optional list of range codes to supply to the component. Range codes are supplied as a JSON array string and can be any of:

  • all - An open ended range
  • today - Today
  • yesterday - Yesterday
  • thismonth - Every day this month
  • lastmonth - Every day in the previous month
  • nextmonth - Every day in the next month
  • thisyear - Every day this year
  • lastyear - Every day in the previous year
  • nextyear - Every day in the next year
  • last{n} - The last n days, e.g. last7
  • next{n} - The next n days, e.g. next7

Methods​

getRange()​

Returns the selected range as an object with different formats:

  • start - the start date
  • end - the end date
  • range - the named range selected
  • func - the function to send with a _range query parameter
  • filter - the json filter using the field attribute to send with a _filter query parameter

Events​

change​

This custom event is fired whenever an range is selected or a date is changed, the event has the following detail:

{
  "start": start date,
  "end": end date,
  "range": the named range selected,
  "func": the function to send with a _range query parameter,
  "filter": the json filter using the field attribute to send with a _filter query parameter
}

Examples​

With time and no override​

<odsl-range-selector includeTime forbidOverride onchange="console.log(event.detail)" >
</odsl-range-selector>

A simple selector​

<odsl-range-selector simple></odsl-range-selector>

A simple selector with defined ranges​

<odsl-range-selector simple ranges='["last7","last30"]'>
</odsl-range-selector>

Using a field​

<odsl-range-selector includeTime field="timestamp" onchange="console.log(event.detail)" >
</odsl-range-selector>

Output from selecting Last 7 days​

{
    "start": "2025-05-23T00:00:00",
    "end": "2025-05-30T23:59:59",
    "range": "last7",
    "func": "between(2025-05-23T00:00:00,2025-05-30T23:59:59)",
    "filter": {
        "timestamp": {
            "$gte": "2025-05-23T00:00:00",
            "$lte": "2025-05-30T23:59:59"
        }
    }
}