Question: I want to render a datepicker on click of a small image, select the date, use the selected date to populate a group of select elements of years, months and days based on the selected date. I figured out the onSelect portion and applying the selected date to the options in the select element.

My problem is the datepicker doesn't close on date selection. It stays there. If i call the hide() method, it hides the image (part of the span element) as well. This is my HTML code:

```
<span id="pickupCalendar"><img src="/images/calendar.png"></img></span>

```

This is the script:

```
$("#pickupCalendar").click(function () {
    $("#pickupCalendar").datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function (dateText, inst) {
            //code to fill the other elements with the selected date goes here
            $("#pickupCalendar").datepicker().hide(); //<-- hides the image (span element along with the datepicker)
        }
    });
});

```

Answer: 
I would change the HTML markup, so it makes it easier to target the elements. 

```
<span id="pickupCalendar"></span><button>Button</button>

    $("button").click(function () {
        $("#pickupCalendar").show();
        $("#pickupCalendar").datepicker({
            dateFormat: 'dd-mm-yy',
            onSelect: function (dateText, inst) {
               //code to fill the other elements with the selected date goes here
               $("#pickupCalendar").datepicker().hide(); 
            }
        });
    });

```

**[FIDDLE](http://jsfiddle.net/Ysxv3/3/)**
Can you try this?

```
$("#pickupCalendar").click(function () {
    $("#pickupCalendar").datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function (dateText, inst) {
            //code to fill the other elements with the selected date goes here
            $("#pickupCalendar").datepicker().hide(); 
            $("#pickupCalendar img").hide();
        }
    });
});

```