How to put a "page" opening on a piece of the page?

Question

In the example of Datepicker, when someone clicks on input date, open the calendar down correct. How can I do this ?

In my case I have a page that only has a calendar made by me, is a specific calendar, but I would like when someone clicked on a button open a "modal" with the Datepicker!

Answer 1

You can use the .show("slow") and .hide("slow") of jQuery to display and disappear with your div. Below is an example code, and here 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");
    });

});