3

No exemplo do DatePicker, quando alguém clica no input de data, abre o calendário para baixo correto. Como eu posso fazer isso ?

No meu caso eu tenho uma página que só tem um calendário feito por mim, é um calendário específico, mas gostaria de quando alguém clicasse em um botão abrisse um "modal" com o DatePicker!

1 Resposta 1

3

Você pode utilizar o .show("slow") e .hide("slow") do jQuery para exibir e sumir com sua div. Segue abaixo um código de exemplo, e aqui o jsfiddle.

HTML:

<input id="seuInput" type="text" />
<button id="fechar">fechar</button>

<div class="seuDatePicker"></div>

CSS:

/*inicialmente a div vem com display: none o que 
deixa ela oculta inicialmente*/
.seuDatePicker {        
    display: none;

    /*atributos utilizados somente para ilustração*/
    border: 1px solid black;
    width: 200px;
    height: 200px;

    /*O position: absolute, evita que se houver conteúdo a 
      baixo da div o mesmo seja jogado para baixo */
    position: absolute;
}

JavaScript:

/*Pega o evento de inicialização*/
$(document).ready(function () {

    //seto o evento de click no input
    $('#seuInput').click(function () {
        //quando houver um click no input ele exibira sua div
        $('.seuDatePicker').show("slow");
    });

    //seto o evento de click no button
    $('#fechar').click(function(){
        //quando houver um click no input ele sumira com sua div
        $('.seuDatePicker').hide("slow");
    });

});
4
  • Ahhhh ótima idéia! Eu sei algumas coisas do Jquery mas não tenho constume de usar! Vou tentar fazer e depois posto aqui o resultado. vlwwww
    – Hermus
    4/09/2015 às 23:23
  • beleza.. espero que te ajude :DD
    – Brunno
    4/09/2015 às 23:29
  • 1
    tem um pequeno problema aqui, se houver conteudo abaixo do input ele será jogado para baixo. 9/09/2015 às 11:51
  • 1
    Bem notado @TobyMosque .. vou adicionar uma melhoria no código acima :D
    – Brunno
    9/09/2015 às 11:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .