Modo escuro

Date picker

O componente de campo data serve especificamente para selecionar uma data ou um intervalo de datas. Quando o utilizador clica sobre o campo, terá um calendário onde pode selecionar a/as datas pretendidas. O seu comportamento é igual a todos os outros campos de input, sendo que contêm micro-interações para que o utilizador tenha feedback do que se está a passar durante a sua utilização.

Características Principais

Seleção Intuitiva de Data

Oferece uma interface gráfica para escolher rapidamente o dia, mês e ano desejados.

Otimização de Entrada de Dados

Minimiza erros de entrada manual, assegurando a correta formatação das datas.

Integração com Calendários

Pode ser integrado com calendários para facilitar a visualização de datas e eventos importantes.

Exemplo de Utilização
  • Formulários de reserva ou agendamento
  • Campos de data em formulários de inscrição ou eventos
  • Interfaces de gestão de tarefas ou projetos

Incorpore Date Pickers sempre que desejar facilitar a entrada e a seleção de datas pelos utilizadores, melhorando a precisão dos dados e a usabilidade da interface.

Default

Date range

Simple

                                            
<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput rangeDatePicker" placeholder="dd/mm/aaaa" type="text">
</div>

<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput simpleDatePicker" placeholder="dd/mm/aaaa" type="text">
</div>

Formatos da data

Pode colocar o formato da data que desejar, no exemplo abaixo colocamos o formato YYYY-MM-DD utilizando o data atributo data-format-date.

Date range

Simple

                                            
<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput rangeDatePicker" placeholder="aaaa-mm-dd - aaaa-mm-dd" type="text" data-format-date="YYYY-MM-DD">
</div>

<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput simpleDatePicker" placeholder="aaaa-mm-dd" type="text" data-format-date="YYYY-MM-DD">
</div>

Pode acrescentar também a hora, no exemplo abaixo colocamos o formato YYYY-MM-DD HH:mm utilizando o data atributo data-format-date.

Date range

Simple

                                            
<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput rangeDatePicker" placeholder="aaaa-mm-dd - aaaa-mm-dd" type="text" data-format-date="YYYY-MM-DD HH:mm">
</div>

<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput simpleDatePicker" placeholder="aaaa-mm-dd" type="text" data-format-date="YYYY-MM-DD HH:mm">
</div>

Mandatório

Date range

Simple

                                            
<label class="required-label" for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
<input class="form form-control required-field daterangepickerInput rangeDatePicker" placeholder="dd/mm/aaaa" type="text">
</div>

<label class="required-label" for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
<input class="form form-control required-field daterangepickerInput simpleDatePicker" placeholder="dd/mm/aaaa" type="text">
</div>

Desativado

Date range

Simple

                                            
<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container disabled">
<input class="form form-control required-field daterangepickerInput rangeDatePicker" disabled placeholder="dd/mm/aaaa - dd/mm/aaaa" type="text">
</div>

<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container disabled">
<input class="form form-control required-field daterangepickerInput simpleDatePicker " disabled placeholder="dd/mm/aaaa" type="text">
</div>

Informativo

Date range

Simple

                                            
<label for="default">Título do campo<i class="icon-circle-info iconLabel"></i></label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput rangeDatePicker" placeholder="dd/mm/aaaa - dd/mm/aaaa" type="text">
</div>

<label for="default">Título do campo <i class="icon-circle-info iconLabel"></i></label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput simpleDatePicker" placeholder="dd/mm/aaaa" type="text">
</div>

Apenas leitura

Date range

Simple

                                            
<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container readonly">
    <input class="form form-control daterangepickerInput rangeDatePicker" readonly value="05/11/1989 - 07/11/1989" placeholder="dd/mm/aaaa - dd/mm/aaaa" type="text">
</div>

<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container readonly">
    <input class="form form-control daterangepickerInput simpleDatePicker" readonly value="05/11/1989" placeholder="dd/mm/aaaa" type="text">
</div>

Mensagem de erro

Date range

Campo obrigatório

Simple

Campo obrigatório 
                                            
<label class="required-label" for="default">Título do campo</label>
<div class="gra-daterangepicker-container readonly">
    <input class="form form-control daterangepickerInput rangeDatePicker" readonly value="05/11/1989 - 07/11/1989" placeholder="dd/mm/aaaa - dd/mm/aaaa" type="text">
</div>

<label class="required-label" for="default">Título do campo</label>
<div class="gra-daterangepicker-container readonly">
    <input class="form form-control daterangepickerInput simpleDatePicker" readonly value="05/11/1989" placeholder="dd/mm/aaaa" type="text">
</div>

Mensagem de informação

Date range

Mensagem de informação

Simple

Mensagem de informação 
                                            
<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput rangeDatePicker" placeholder="dd/mm/aaaa - dd/mm/aaaa" type="text">
</div>
<span class="graInfoField">Mensagem de informação</span>

<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput simpleDatePicker" placeholder="dd/mm/aaaa" type="text">
</div>
<span class="graInfoField">Mensagem de informação</span>

Acessibilidade

Date range

Simple

                                            
<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput rangeDatePicker form-accessibility" placeholder="dd/mm/aaaa - dd/mm/aaaa" type="text">
</div>

<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
    <input class="form form-control daterangepickerInput simpleDatePicker form-accessibility" placeholder="dd/mm/aaaa" type="text">
</div>