jquery: make date picker show/hide via image?

Question

I want to use an image of a calendar to show/hide the jquery datepicker. Based on the documentation it looks like I need to set buttonImage and buttonImageOnly, which I have. the date picker is working but it is always visible. here is my code:

<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker({ 
    altField: '#from', 
    altFormat: 'yymmdd', 
    buttonImage: 'datepicker.png', 
    buttonImageOnly: true, 
    defaultDate: <?=getDaysFromToday($_GET['from'])?>, 
    showOn: 'focus' 
    });
});

$('#datepicker').datepicker({
    onSelect: function(dateText, inst) {
    $("#myform").submit(); 
    }
});
 </script>

Also I am trying to make it submit a form when you choose a date, I can't seem to get that to work either.

Am I doing something wrong?

Thanks!

Answer 1

Could you set the date picker's display to none?

Use firebug to inspect the element, determine it's name, and then use this CSS accordingly

.ui-datepicker {
    display: none;
}

Then, on your image

$('#show-calendar img').bind('click', function() {
    $('.ui-datepicker').show();
};

Answer 2

Replace

showOn: 'focus'

with

showOn: 'button'

This will make the datepicker appear only when the button is clicked, not when the text field gets the focus.

Can't tell you why the form submit doesn't work. Have you bound any submit events to the form that might be returning false?

Since this refres to the input element inside the event handler, perhaps you can try this for the submit:

this.form.submit();

Edit after comment: Have a look at this example, the button gets added automatically.

I've just realized you have two separate calls to datepicker. Combining the two into one might help with your event problems:

$("#datepicker").datepicker({ 
    altField: '#from', 
    altFormat: 'yymmdd', 
    buttonImage: 'datepicker.png', 
    buttonImageOnly: true, 
    defaultDate: <?=getDaysFromToday($_GET['from'])?>, 
    showOn: 'focus'.
    onSelect: function(dateText, inst) {
        $("#myform").submit(); 
    }
});