Data Visualisation

Date range picker

<DomDateRangePicker>

Inclusive reporting dates with useful presets, explicit Apply and Cancel actions, and optional period comparisons.

Reporting dates and comparison periods

Reporting period: 2026-09-01 to 2026-09-30 (inclusive)
Comparison period: 2026-08-02 to 2026-08-31

ReportingPeriod.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomDateRangePicker } from '@getdom/studio';
const period = ref({ start: '2026-09-01', end: '2026-09-30' });
const comparison = ref('previous-period');
const compared = ref({ start: '2026-08-02', end: '2026-08-31' });
/** Receives the atomic query change; the application decides when and how to fetch. */
function updateQuery(payload) { compared.value = payload.comparisonRange; }
</script>
<template>
	<div class="w-full space-y-5">
		<DomDateRangePicker v-model="period" v-model:comparison="comparison" anchor-date="2026-09-30" min="2026-01-01" max="2026-09-30" @change="updateQuery" />
		<dl class="space-y-2 text-sm"><div><dt class="text-muted-fg">Reporting period</dt><dd class="mt-1 font-medium">{{ period.start }} to {{ period.end }} (inclusive)</dd></div><div v-if="compared"><dt class="text-muted-fg">Comparison period</dt><dd class="mt-1 font-medium">{{ compared.start }} to {{ compared.end }}</dd></div></dl>
	</div>
</template>

Working with your data

Ranges are inclusive calendar dates. Apply emits one complete query choice; Cancel keeps the existing value. Supply anchorDate from the reporting timezone when presets must match a server-owned business date. Comparisons may fall outside the primary min/max bounds.

Explore Data Visualisation

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue`	object	Record<string, unknown>	{"start":"","end":""}	Controlled inclusive { start, end } dates in YYYY-MM-DD format.
`comparison`	'none' \| 'previous-period' \| 'previous-year'	string	'none'	—
`showComparison`	boolean	boolean	true	—
`label`	string	string	'Reporting period'	—
`disabled`	boolean	boolean	false	—
`min`	string	string	''	—
`max`	string	string	''	—
`anchorDate`	string	string	''	Preset reference date. Defaults to browser-local today after mount; supply a reporting-timezone date for deterministic presets.
`locale`	string	string	'en-GB'	—

Auto-generated from Date range picker.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	{ start, end }	Committed inclusive YYYY-MM-DD dates.
@update:comparison	string	Committed comparison mode.
@change	{ range, comparison, comparisonRange }	Atomic reporting query change; fetching remains application-owned.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.