Date Range Picker Nav

Visão geral

O Date Range Picker Nav permite que o usuário selecione um período de datas e navegue entre eles, mantendo a mesma distância entre os dias selecionados. Ele suporta a seleção de períodos predefinidos, como "Últimos 7 dias" ou "Mês atual", e também permite a navegação entre semanas, meses ou períodos personalizados.

Período com predefinição

{ "firstDate": "2025-05-05T00:00:00.000Z", "lastDate": "2025-05-05T23:59:59.999Z", "presetDate": 1 }

Seleção por mês

{ "month": 4, "year": 2025 }

Seleção por semana

{ "week": 18, "year": 2025 }

Clique para visualizar o código

vue

<script setup>
import { ref } from 'vue';
import { LxDateRangePickerNav } from '@lde/lxcomponents';

const { week, month } = getDefaultPeriod();
const period = ref(null);
const periodMonth = ref(month);
const periodWeek = ref(week);

function getDefaultPeriod(referenceDate = new Date()) {
	const year = referenceDate.getFullYear();
	const monthIndex = referenceDate.getMonth();
	const startOfYear = new Date(year, 0, 1);
	const daysSinceStartOfYear = Math.floor((referenceDate - startOfYear) / (1000 * 60 * 60 * 24));
	const weekIndex = Math.floor(daysSinceStartOfYear / 7) + 1;

	const week = {
		week: weekIndex,
		year
	};
	const month = {
		month: monthIndex,
		year
	};

	return { week, month, year };
}
</script>
<template>
	<LxDateRangePickerNav id="period" v-model="period" label="Período com predefinição" :initial-preset="1" in-preset="1,19,2" />
	<div class="small text-muted">{{ period }}</div>
	<hr />
	<LxDateRangePickerNav id="period-mes" v-model="periodMonth" label="Seleção por mês" picker="month" />
	<div class="small text-muted">{{ periodMonth }}</div>
	<hr />
	<LxDateRangePickerNav id="period-semana" v-model="periodWeek" label="Seleção por semana" picker="week" />
	<div class="small text-muted">{{ periodWeek }}</div>
</template>

Variações

Variação	Descrição
DatePicker	Permite que os usuários selecionem uma data. Pickers podem exibir datas passadas, presentes e/ou futuras.
DateRangePicker	Este componente permite que o usuário selecione um período de datas. O retorno é um objeto `{ firstDate, lastDate, presetDate }`
DateRangePickerNav	Este componente permite que o usuário selecione um período de datas e navegue entre eles. O retorno é um objeto `{ firstDate, lastDate, presetDate }`

Propriedades

Nome	Descrição	Tipo	Padrão
id	`⚠️ obrigatório` Define o id que o input irá receber. Nesse componente, ele será concatenado com a string `dp-input-`	`String`	-
modelValue	`⚠️ obrigatório` Define o valor do período selecionado. Nota: Utilizar a implementação padrão com o `v-model`.	`Object`	-
label	Define a label do input.	`String`	-
disabled	Define se o componente estará desabilitado.	`Boolean`	`false`
min-date	Define a data mínima que pode ser selecionada. Deve ser uma string no formato `dd/MM/yyyy`.	`String`	-
max-date	Define a data máxima que pode ser selecionada. Deve ser uma string no formato `dd/MM/yyyy`.	`String`	-
size	Define o tamanho do campo.	`String`	`'md'`
in-preset	Define a predefinição de período selecionada.	`String`	-
picker	Aceita as opções `range`, `month` e `week`, que deixam o formato do modelValue como abaixo: range: `{ firstDate: Date, lastDate: Date, presetDate: Number }`. month: `{ month: Number, year: Number }`. week: `{ week: Number, year: Number }`.	`String`	`range`

Eventos

Nome	Descrição
update:modelValue	Emite o valor atualizado do período selecionado no formato `{ firstDate, lastDate, presetDate }`

Enum de datas predefinidas

Utilize o enum detalhado no DateRangePicker para enviar sua string de predifinições.

Playground

Período

{ "firstDate": "2025-05-05T00:00:00.000Z", "lastDate": "2025-05-05T23:59:59.999Z", "presetDate": 1 }

Nome	Controle
disabled
label
min-date
max-date
in-preset
picker

Clique para visualizar o código

vue

<script setup>
import { ref, computed } from 'vue';
import { LxDateRangePickerNav } from '@lde/lxcomponents';
import { useDateControl } from '@/core/composables/useDateControl';
import dateApi from '@/core/apis/dateApi';

const { getWeekObject } = useDateControl();

const disabled = ref(false);
const minDate = ref();
const maxDate = ref();
const label = ref('Período');
const inPreset = ref('1,2,3,4');
const picker = ref('range');

const resetKey = ref(0);

const minDateAsObject = computed(() => {
	if (!minDate.value) {
		return null;
	}

	return dateApi.ptBrToDate(minDate.value);
});

const maxDateAsObject = computed(() => {
	if (!maxDate.value) {
		return null;
	}

	return dateApi.ptBrToDate(maxDate.value);
});

const modelvalue = ref(getDefaultModelValue());

function incrementResetKey() {
	resetKey.value += 1;
}

function handleUpdateModelValueFromPickerSelect() {
	modelvalue.value = getDefaultModelValue();
	incrementResetKey();
}

function getDefaultRange() {
	const firstPresetDate = Number(inPreset.value.split(',')[0]);
	return { presetDate: isNaN(firstPresetDate) ? 1 : firstPresetDate };
}

function getDefaultWeek() {
	const firstDayOfWeek = new Date();
	firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay());
	const lastDayOfWeek = new Date();
	lastDayOfWeek.setDate(lastDayOfWeek.getDate() + (6 - lastDayOfWeek.getDay()));
	return getWeekObject([firstDayOfWeek, lastDayOfWeek]);
}

function getDefaultMonth() {
	return { month: new Date().getMonth() + 1, year: new Date().getFullYear() };
}

function getDefaultModelValue() {
	switch (picker.value) {
		case 'range':
			return { ...getDefaultRange() };
		case 'week':
			return { ...getDefaultWeek() };
		case 'month':
			return { ...getDefaultMonth() };
		default:
			return null;
	}
}
</script>

<template>
	<div class="row">
		<div class="col-md-10 col-sm-12">
			<div class="mb-3">
				<LxDateRangePickerNav
					id="lx-daterange-picker-nav-playground"
					v-model="modelvalue"
					:key="`reset-${picker}-${inPreset}-${resetKey}`"
					:disabled="disabled"
					:min-date="minDateAsObject"
					:max-date="maxDateAsObject"
					:label="label"
					:in-preset="inPreset"
					:picker="picker"
				/>
			</div>
		</div>
	</div>
	<div class="small text-muted">
		{{ modelvalue }}
	</div>

	<table style="max-height: 50vh">
		<thead>
			<tr>
				<th scope="col">Nome</th>
				<th scope="col">Controle</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<label class="form-label m-0"> disabled </label>
				</td>
				<td>
					<input v-model="disabled" class="form-check-input" type="checkbox" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">label</label>
				</td>
				<td>
					<input v-model="label" type="text" class="form-control" @change="incrementResetKey" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">min-date</label>
				</td>
				<td>
					<input v-model="minDate" type="date" class="form-control" @change="incrementResetKey" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">max-date</label>
				</td>
				<td>
					<input v-model="maxDate" type="date" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">in-preset</label>
				</td>
				<td>
					<input v-model="inPreset" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">picker</label>
				</td>
				<td>
					<select v-model="picker" class="form-select" @change="handleUpdateModelValueFromPickerSelect">
						<option value="range">range</option>
						<option value="month">month</option>
						<option value="week">week</option>
					</select>
				</td>
			</tr>
		</tbody>
	</table>
</template>

Date Range Picker Nav ​

Visão geral ​

Variações ​

Propriedades ​

Eventos ​

Enum de datas predefinidas ​

Playground ​