Habilitar calendário no input date com Datepicker Bootstrap

Quem nunca precisou de um campo para data em um formulário tão intuitivo quanto o apresentado no chrome por padrão para input com type date? Fiz um teste com o plugin Datepicker Bootstrap, que adiciona a função de apresentar um calendário ao input em qualquer navegador e elaborei esse post para compartilhar o que aprendi.

Quem nunca precisou de um campo para data em um formulário tão intuitivo quanto o apresentado no chrome por padrão para input com type date? Fiz um teste com o plugin Datepicker Bootstrap, que adiciona a função de apresentar um calendário ao input em qualquer navegador e elaborei esse post para compartilhar o que aprendi.

Introdução

O Datepicker Bootstrap é um daquelas plugins bem úteis que apenas tomamos conhecimento quando precisamos utilizar. A função deste plugin é adicionar a um elemento HTML a função de apresentar um calendário para o usuário escolher uma data, muito útil para formulários que solicitam este tipo de informação em formato padrão para o usuário, dando a possibilidade dele escolher a data ao invés de digitar a mesma.

O plugin existe desde a versão 2 do Bootstrap porém efetuei testes do mesmo com versão 3.2.0 do Bootstrap e tudo correu perfeitamente.


A documentação do plugin é um pouco confusa, parece que o desenvolvedor atualizou o plugin porém não atualizou a documentação, que ainda faz referência a versão 2.3 do Bootstrap, até em seu ultimo release. Mesmo assim a documentação é útil pois contêm parâmetros de configuração do calendário.

Links para referência do Datepicker:

GitHub Documentação Demo & Gerador de Código

Como utilizar

Como nos outros tutoriais, segue demo e arquivo compactado dos testes efetuado Demo.

A utilização do Datepicker é muito simples, primeiramente precisamos incluir os arquivos de referência do plugin, conforme o exemplo abaixo.

<!DOCTYPE html>
<html lang="pt">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Testando Data Picker</title>

    <!-- 1º Adicionamos o arquivo CSS do plugin ao código. -->
      <!-- Datepicker -->
      <link href="css/datepicker.css" rel="stylesheet">

    <!-- Declaração padrão de arquivos do bootstrap -->
      <!-- Bootstrap -->
      <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/readable/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
</head>

Obs: o fato do plugin ser voltado para websites feitos com o Bootstrap explica as referências ao framework na tag <head> da página teste.

Neste bloco foram declarados os arquivos de configuração de estilo do Bootstrap e o arquivo de estilo do plugin.

O próximo passo é declarar os elementos que vão compor o layout que vai alojar o elemento <input>, que será o responsável por apresentar o calendário no clicar do usuário.

<body>
  <div class="container">

      <h1 align="center">
        Testando Datepicker for Bootstrap
      </h1>

      <br>

      <div class="row">

        <!-- Div utilizada para enquadrar input de teste no centro da tela -->
        <div class="col-sm-offset-4 col-sm-4">
          <!-- Input ao qual foi designado a função para exibir o calendário, que vai ser selecionado com jquery na função abaixo. -->
          <input type="text" id="exemplo" class="form-control">
        </div>

      </div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Referência do arquivo JS do plugin após carregar o jquery -->
      <!-- Datepicker -->
      <script src="js/bootstrap-datepicker.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script>
      $(document).ready(function () {
        $('#exemplo').datepicker({
            format: "dd/mm/yyyy",
            language: "pt-BR"
        });
      });
    </script>

  </body>
</html>


Feito isso, se os arquivos de referência do plugin estiverem no local especificado, ao clicar no campo será apresentado, abaixo do mesmo, um calendário para escolha da data, conforme imagem abaixo.

Datepicker Bootstrap - Exemplo - Web Social Dev

Além desta simples inclusão, o plugin também conta com opções para estilizar o calendário apresentado. Essas opções são parâmetros declarados na função que executa o plugin. No nosso exemplo, no bloco de código onde é declarado o script que chama a função do Datepicker foram atribuidas as seguintes opções: format e language, a primeira para determinar o formato que será inserida a data após a escolha no calendário e a segunda a linguagem do calendário.

Dentre as opções disponíveis para configurar o calendário, as mais interessantes são:

  • Language – definir linguagem do calendário.
  • startDate – definir data de inicio do calendário.
  • endDate – definir data de fim do calendário.
  • autoclose – definir se calendário fecha ou não após inclusão de data.
  • forceParse – auto ajustar formato de data quando o mesmo não é inserido no padrão do campo.
  • format – definir o formato de exibição da data. Default: “mm/dd/yyyy”
  • minViewMode – definir um limite para o calendário, se o mesmo vai apresentar apenas dias, meses ou anos.
  • startView – defini data apresentada no calendário quando o mesmo é executado.
  • todayHighlight – marcação em data atual.
  • weekStart – Definir inicio da semana, 0 para domingo e 6 para segunda.

Algumas opções possuem parâmetros específicos, necessário confirmar na documentação os parâmetros para obter os resultados esperados.

Você pode incluir as opções dentro da função que chama o datepicker, conforme o exemplo abaixo:

<script>
  $(document).ready(function () {
    $('#exemplo').datepicker({
        format: "DD/MM/yy",
        language: "pt-BR",
        minViewMode: 0;
        orientation: auto
    });
  });
</script>


Tirando algumas dúvidas sobre jQuery, antes de postar o tutorial, encontrei uma solução similar utilizando apenas a biblioteca jQuery UI, segue abaixo o código para utilização.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
         $(function() {
         $( "#datepicker" ).datepicker();
         });
      </script>
   </head>
   <body>
      <p>Date: <input type="text" id="datepicker"></p>
   </body>
</html>

Bom galera, é isso!
Espero ter contribuído, qualquer dúvida estou a disposição nos comentários.

🙂

  • Gustavo Rocha

    Boa Thierry! Obrigado por compartilhar esse conhecimento, funcionou beleza aqui! Um abraço

    • Obrigado Gustavo, qualquer duvida estamos ai 🙂

  • Joel

    Muito massa o plugin brother! Veja se pode me ajudar…
    Os nomes de meses e dias da semana não ficam em pt-BR

    • Joel

      Ou isso se refere também ao formato de data?

      • Então Joel, eles estão em inglês no código, mas no demo que eu fiz eu traduzi, pega por ele que está tudo em português. 🙂

        • Joel

          Massa!
          O que fiz foi pegar a parte do “pt-BR” no código fonte do próprio gerador do plugin e colar junto ao código “en”.
          Funcionou blz!
          Valeu brother! ficou muito bom!

  • Rafael

    Thierry, boa tarde! Estou usando o datepicker em uma aplicação. Peguei a explicação daqui. Precisava selecionar também o horário. Tentei usa o datetimepicker, porém não funcionou. Você sabe alguma forma de selecionar a data e o horário?

  • JP

    Bom dia Thierry!

    Seu link de download para a sua demo está apontando para o arquivo chart.js que pertence ao seu outro tutorial sobre a library chart.js. Você poderia por favor corrijir isso?

    • Eita, obrigado pelo feedback JP, está corrigido! 🙂

  • Ola Thierry

    Você experimentou o calendário no Chrome do Android (não testei no iOS)?? Como o campo é text ele abre o teclado do android e ai fica praticamente imposível usar o calendário devido ao espaço na tela..

  • Laercio

    Bom dia Therry …cheguei a seu tutorial atraves do google, e já tinha implementado a solução, mas no meu formilario tenho dois campos de data …no primeiro funciona e tal ,mesmo se eu fizer a gambiarra de repetir o codigo , naõ funciona ….como devo proceder ?
    Desde já agradeço…

  • Gabriel Costa Alves

    Bom Dia Thierry! O demo não está abrindo. “Página não encontrada”. Poderia por favor verificar? Obrigado

  • Samir

    TOP TOP TOP ! nada mais, Obriagdo por compartilhar !

  • Elisio

    Olá pessoal boa noite, este post ajudou muito o meu o trabalho, tinha dificuldade de integrar a data no form, ja consegui, mas agora eu tenho vários campos data, mas ao inserir varias vezes a div com o elemento datapicker ele so funciona no primeiro alguem pode ajudar nisso….grato pela ajuda

    • Alexandre

      substitua
      por

      e no JS
      substitua
      $(function() {
      $( “#datepicker” ).datepicker();
      });
      por
      $(function() {
      $( “.datepicker” ).datepicker();
      });

    • Tailan Patrick

      Valeu Alexandre, estava com esse problema e sua solução foi a melhor!

  • Maycom

    Olá pessoal, gostaria de saber como eu posso enviar a data do datePicker do bootstrap para dois elementos html, ou se teria como mostrar a data em um tipo de formato, mais armazenar no ‘value’ do input em outro formato, é que preciso fazer alguns cálculos com a data no formato original, porém quero mostrar ela no formato “dd M” para o usuário. Obrigado

    • Opa Maycom,

      da pra fazer tudo isso que você comentou com JS mesmo ou jQuery, se quiser facilitar mais ainda. Existem métodos no jQuery para manipular qualquer informação no DOM.

      • Maycom

        Opa, teria como dar uma Orientação ou algum código pronto?só para eu ter uma base, já que não consegui de jeito nenhum. Eu já tentei utilizar o toDisplay e toValue, mas não tive sucesso.

        • http://api.jqueryui.com/datepicker/#option-dateFormat

          da uma olhada nesse link que ele já apresenta diversos exemplos com jQuery UI.

          • Maycom

            O problema é que é diferente os recursos do datePicker bootstrap e do jQuery Ui.

          • tenta com essa: https://momentjs.com/

            ela é mais genérica e totalmente em JS, só dar uma estudada nela que você consegue implementar sem dificuldades. Se estiver utilizando um servidor com suporte a PHP, da pra tratar a data facilmente também com o sprintf().

          • Maycom

            Obrigado Thierry pelas sugestões, eu consegui resolver o meu problema, utilizando o $(‘id’).datepicker(‘getDate’). Obrigado mais uma vez…

  • Joaquim Fernandes

    Olá esse artigo me ajudou muito, eu agradeço a sua iniciativa. Estou tentando fazer um registro de reserva de uma pousada, entao tenho dois campos data de entrada e data de saida? Como eu faço pra que quando o usuario selecione a data de entrada a data de saida mude para o dia seguinte a data escolhida para entrada na pousada? Vcs poderiam sugerir algum outro artigo ou tutorial?