JQuery: toggle date-picker in when clicked on a span tag

Question

Here, I am trying to add a birthdate but with this code:

<script>
    $('#datepicker').focus(function() {
        $("#datepicker").datepicker();
    });
</script>

I am not able to toggle the jquery datepicker off! this is my html:

<div class="DOB">
            <span class="DOB" contenteditable="true" id="datepicker">25/09/1996</span>
            <hr />
            <span class="st">Date of birth</span>
        </div>

I don't want JQuery datepicker on my screen all the time!

please help...

Answer 1

You can do something like this

var show = 1;

$('#datepicker').focus(function() { 
if(show == 1)
{
    $( "#datepicker" ).datepicker("show");
    show = 0;
}
else
{
    $( "#datepicker" ).datepicker("hide");
    show = 1;
}
});

Answer 2

I searched for this on other sites and this works fine except that I cannot switch between months or if I shut it down without choosing a date it leaves the space blank!...

<script>
    $(function() {

        $('#datepicker').click(function() {
            $(this).datepicker({
                onSelect: function(date) {
                    $(this).datepicker('destroy').html(date);
                }
            });
        });
        $('body').click(function(e) {
            if ($(e.target).closest('#datepicker').length == 0) {
                $('#datepicker').datepicker('destroy');
            }
        });
    });
</script>

This will work definitely, and if possible please find the solution for switching months and blank space problem!