jQuery - Datepicker not pulling up on first load?

Question

I have this page and this page that i have datepickers on them using the jquery ui datepicker. It works well sometimes but when i first click on the field on occasions nothing happens at all. Cant seem to figure out why. Here is my code

My html

<input type="text" value="" size="30" name="report[start_date]" id="report_start_date" autocomplete="off" class="hasDatepicker">

jQuery

$('#report_end_date').datepicker();

$('#report_start_date').datepicker();

The code is simple enough but its not making sense...any ideas

Answer 1

At the bottom of your page you have

document.getElementById('report_start_date').focus();

This focuses the element, but does not trigger the datepicker. You have to manually click it.

Try it, click away to unfocus, then click to refocus and it'll work.

To trigger the datepicker programmatically, use this:

$('#report_start_date').datepicker('show');