Date range picker

Visão geral

O date range picker funciona de forma semelhante ao de data única, mas em vez de escolher apenas uma data, o usuário escolhe uma data de ínicio e uma data de término, com a possibilidade de escolher entre datas predefinidas e qual será a predefinição inicial.

Clique para visualizar o código

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

const periodo = ref();
</script>
<template>
	<LxDateRangePicker id="periodo" v-model="periodo" />
</template>

Variações

Variação	Descrição
DatePicker	Permite que os usuários selecionem uma data. Pickers pode 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 }

Slots

slot	Descrição
trigger	O conteúdo substitui o botão de acionamento do calendário

Propriedades

Nome	Descrição	Tipo	Padrão
id	⚠️ obr Define o id que o input irá receber. Nesse componente, ele será concatenado com a string dp-input-	String	-
label	Define a label do input	String	-
disabled	Define o attributo disabled do input	Boolean	false
readonly	Define o attributo readonly do input	Boolean	false
size	Define o tamanho do input. Os valores disponíveis são: sm md lg	String	md
min-date	Todas as datas que antecedem a data passada serão desabilitadas	Date	-
max-date	Todas as datas após a data passada serão desabilitadas	Date	-
error-text	Adiciona uma mensagem de erro de altera estado do componente para inválido	String	-
help-text	Define uma mensagem de ajuda para o preenchimento do campo	String	-
String	-
initial-preset	Define qual enum das possíveis datas predefinidas será a data inicial	Number	-
in-preset	Define quais datas predefinidas estarão disponíveis para seleção. Existindo as seguintes possibilidades quando utilizada: '*' para mostrar todas as predefinições '-' OR undefined, uma string vazia '' mostrará as predefinições padrões e se desejar escolher uma das predefinições do enum abaixo, envie como uma string de números separados por vírgula '1,2,3,4,5'.	String	-

Enum de datas predefinidas

Chave	Id
Today	1
CurrentWeek	2
CurrentMonth	3
CurrentYear	4
Last7days	5
Last15days	6
Last30days	7
Last60days	8
Last90days	9
Last6months	10
Next7days	11
Next15days	12
Next30days	13
LastMonth	14
Last3months	15
Last12months	16
Last18months	17
Yesterday	18

Playground

Período

{ "firstDate": "2025-05-07T18:00:08.780Z", "lastDate": "2025-05-14T18:00:08.780Z", "presetDate": null }

Nome	Controle
disabled
readonly
label
min-date
max-date
error-text
help-text
size	small (sm) medium (md) large (lg)
initial-preset
in-preset

Clique para visualizar o código

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

const disabled = ref(false);
const readonly = ref(false);
const size = ref('md');
const errorText = ref('');
const minDate = ref();
const maxDate = ref();
const label = ref('Período');
const helpText = ref('');
const initialPreset = ref(null);
const inPreset = ref(null);

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 firstDate = new Date();
const lastDate = new Date(new Date().setDate(firstDate.getDate() + 7));
const range = ref({ firstDate, lastDate, presetDate: null });
</script>

<template>
	<div class="row">
		<div class="col-md-10 col-sm-12">
			<div class="mb-3">
				<LxDateRangePicker
					id="lx-datepicker-range-playground"
					v-model="range"
					:disabled="disabled"
					:readonly="readonly"
					:size="size"
					:error-text="errorText"
					:help-text="helpText"
					:min-date="minDateAsObject"
					:max-date="maxDateAsObject"
					:label="label"
					:initial-preset="initialPreset"
					:in-preset="inPreset"
				/>
			</div>
		</div>
	</div>
	<div class="small text-muted">
		{{ range }}
	</div>

	<!-- playground controls -->
	<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"> readonly </label>
				</td>
				<td>
					<input v-model="readonly" 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" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">min-date</label>
				</td>
				<td>
					<input v-model="minDate" type="date" class="form-control" />
				</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">error-text</label>
				</td>
				<td>
					<input v-model="errorText" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">help-text</label>
				</td>
				<td>
					<input v-model="helpText" type="text" class="form-control" />
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">size</label>
				</td>
				<td>
					<div class="form-check">
						<input id="sm" v-model="size" value="sm" class="form-check-input" type="radio" />
						<label class="form-check-label" for="sm"> small (sm) </label>
					</div>
					<div class="form-check">
						<input id="md" v-model="size" value="md" class="form-check-input" type="radio" />
						<label class="form-check-label" for="md"> medium (md) </label>
					</div>
					<div class="form-check">
						<input id="lg" v-model="size" value="lg" class="form-check-input" type="radio" />
						<label class="form-check-label" for="lg"> large (lg) </label>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<label class="form-label m-0">initial-preset</label>
				</td>
				<td>
					<input v-model="initialPreset" type="number" 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>
		</tbody>
	</table>
</template>