Skip to main content

CnDateRangePicker

Preset-driven date range selector wrapping two NcDateTimePickers and a preset NcSelect. Used internally by CnDashboardPage's dateRange header and exposed publicly so bespoke screens can reuse the same control without composing the primitives themselves.

Usage​

<template>
  <CnDateRangePicker v-model="range" />
</template>

<script>
export default {
  data() {
    return {
      range: {
        from: '2026-05-15T00:00:00.000Z',
        to: '2026-05-21T23:59:59.999Z',
        preset: 'last-7',
      },
    }
  },
}
</script>

Selecting a preset (other than custom) auto-fills both pickers to now − days → now. Selecting custom (or any preset with days: null) keeps both pickers manually editable; typing in either picker emits preset: 'custom' so the parent knows the user dialled in a bespoke window.

Props​

PropTypeDefaultDescription
valueObjectnullCurrent { from, to, preset } value (ISO-8601 UTC).
presetsArrayDEFAULT_DATE_RANGE_PRESETSPreset list: { id, label, days } or { id, label, hours }. days: null = manual. hours: N = rolling N-hour window.
disabledBooleanfalseDisables both date pickers and the preset select.
dateFormatString'YYYY-MM-DD'Forwarded to NcDateTimePicker's format prop.
presetLabelString'Range preset'A11y label for the preset dropdown.
fromLabelString'From'A11y label for the start-of-range picker.
toLabelString'To'A11y label for the end-of-range picker.

Events​

EventPayloadDescription
input{ from: string, to: string, preset: string }Emitted on preset selection or manual edit. Use v-model to bind.

Default presets​

The exported DEFAULT_DATE_RANGE_PRESETS constant mirrors the defaults applied by CnDashboardPage when dateRange.presets is omitted:

[
  { id: 'last-8h',  label: 'Last 8 hours',  hours: 8 },
  { id: 'last-24h', label: 'Last 24 hours', hours: 24 },
  { id: 'today',    label: 'Today',         days: 1 },
  { id: 'last-7',   label: 'Last 7 days',   days: 7 },
  { id: 'last-30',  label: 'Last 30 days',  days: 30 },
  { id: 'last-90',  label: 'Last 90 days',  days: 90 },
  { id: 'custom',   label: 'Custom range',  days: null },
]

Day vs hour presets. A preset with days: N resolves to a calendar-aligned window (midnight UTC start through end-of-day UTC today). A preset with hours: N resolves to a rolling window ending at the exact current instant (now − N hours → now), so "Last 8 hours" tracks the trailing 8h rather than a day boundary.

Starting range from the manifest. CnDashboardPage's dateRange.default accepts either an explicit { from, to } window or just a preset id — e.g. dateRange: { enabled: true, default: { preset: 'last-7' } } resolves the window from the preset at mount, so a dashboard can declare its initial range by name without hard-coding dates.

Helpers​