Date picker

Visão geral

O date picker permite que os usuários selecionem uma data. Pickers pode exibir datas passadas, presentes e/ou futuras.

Clique para visualizar o código

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

const dataInicial = ref(new Date());
</script>

<template>
	<LxDatePicker id="data-inicial" v-model="dataInicial" />
</template>

Variações

Variação	Descrição
DatePicker	Permite o usuário pesquisar e selecionar uma opção em uma lista. Ele também permite o usuário criar uma nova opção
DateRangePicker	Este componente permite que o usuário selecione um período de datas. O retorno é um array de valores do tipo date

Slots

slot	Descrição
trigger	O conteúdo deste slot substitui o botão de acionamento do calendário. Pode acessar o estado isMenuOpen
dp-input	O conteúdo deste slot substitui o input padrão de data. Pode acessar os métodos e estados value, onInput, onEnter, onTab, onClear, onBlur, onKeypress, onPaste, isMenuOpen

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	-
calendar	Define se será exibido o calendário para seleção de datas	Boolean	true
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	-
has-arrow	Define se será exibido a setinha rente ao input de data	Boolean	true

Playground

Data playground

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

Clique para visualizar o código

<script setup>
import { ref, computed } from 'vue';
import { LxDatePicker } from '@lde/lxcomponents';
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 helpText = ref('');
const minDate = ref();
const maxDate = ref();
const label = ref('Data playground');
const hasArrow = ref(true);

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);
});
</script>

<template>
	<div class="row">
		<div class="col-12">
			<LxDatePicker
				id="lx-datepicker"
				v-model="date"
				:disabled="disabled"
				:readonly="readonly"
				:size="size"
				:error-text="errorText"
				:help-text="helpText"
				:calendar="calendar"
				:min-date="minDateAsObject"
				:max-date="maxDateAsObject"
				:label="label"
				:hasArrow="hasArrow"
			/>
		</div>
		<div class="col-12">
			<div class="form-text">
				{{ date }}
			</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"> calendar </label>
				</td>
				<td>
					<input v-model="calendar" 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"> hasArrow </label>
				</td>
				<td>
					<input v-model="hasArrow" class="form-check-input" type="checkbox" />
				</td>
			</tr>
		</tbody>
	</table>
</template>