LxComponentsDate 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.
Clique para visualizar o código
vue
<template>
<LxDateRangePicker id="periodo" v-model="periodo" />
</template>
<script setup>
import { ref } from 'vue';
import { LxDateRangePicker } from '@/index';
const periodo = ref([]);
</script><template>
<LxDateRangePicker id="periodo" v-model="periodo" />
</template>
<script setup>
import { ref } from 'vue';
import { LxDateRangePicker } from '@/index';
const periodo = ref([]);
</script>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 array de valores do tipo date |
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 | - |
Playground
Período
Selecione o período
| Nome | Controle |
|---|---|
Clique para visualizar o código
vue
<template>
<div class="row">
<div class="col-md-6 col-sm-12">
{{ label }}
<div class="mb-3">
<LxDateRangePicker
id="lx-datepicker"
v-model="range"
:disabled="disabled"
:readonly="readonly"
:size="size"
:error-text="errorText"
:help-text="helpText"
:min-date="minDateAsObject"
:max-date="maxDateAsObject"
:label="label"
/>
</div>
</div>
</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" disabled />
</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>
</tbody>
</table>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { LxDateRangePicker } from '@/index';
import dateApi from '@/core/apis/dateApi';
const calendar = ref(true);
const disabled = ref(false);
const readonly = ref(false);
const date = ref();
const size = ref('md');
const errorText = ref('');
const minDate = ref();
const maxDate = ref();
const label = ref('Período');
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 range = ref();
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
range.value = [startDate, endDate];
});
const helpText = computed(() => {
if (!range?.value) {
return 'Selecione o período';
}
return `De ${range.value[0].toLocaleDateString()} até ${range.value[1].toLocaleDateString()}`;
});
</script><template>
<div class="row">
<div class="col-md-6 col-sm-12">
{{ label }}
<div class="mb-3">
<LxDateRangePicker
id="lx-datepicker"
v-model="range"
:disabled="disabled"
:readonly="readonly"
:size="size"
:error-text="errorText"
:help-text="helpText"
:min-date="minDateAsObject"
:max-date="maxDateAsObject"
:label="label"
/>
</div>
</div>
</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" disabled />
</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>
</tbody>
</table>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { LxDateRangePicker } from '@/index';
import dateApi from '@/core/apis/dateApi';
const calendar = ref(true);
const disabled = ref(false);
const readonly = ref(false);
const date = ref();
const size = ref('md');
const errorText = ref('');
const minDate = ref();
const maxDate = ref();
const label = ref('Período');
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 range = ref();
onMounted(() => {
const startDate = new Date();
const endDate = new Date(new Date().setDate(startDate.getDate() + 7));
range.value = [startDate, endDate];
});
const helpText = computed(() => {
if (!range?.value) {
return 'Selecione o período';
}
return `De ${range.value[0].toLocaleDateString()} até ${range.value[1].toLocaleDateString()}`;
});
</script>