In the DatePicker example, when someone clicks on input date, opens the correct calendar down. How can I do this ?
In my case I have a page that only has a calendar made by me, it's a specific calendar, but I would like it when someone clicks on a button to open a "modal" with DatePicker !
You can use .show("slow") and .hide("slow") of jQuery to display and disappear with your div . Below is a sample code, and here the 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");
});
});