jQuery Datepicker shows in upper left corner

I found some similar questions, but none of them开发者_如何学运维 were applicable to my situation.

I have 2 text fields on a page. Clicking on a text field opens a datepicker calendar. It works just as intended.

The problem is, when the page loads the datepicker month bar shows in the upper left corner (you know, the thing above the calendar where you can pick the month). You can actually use the bar too. When I click on a text field the extra bar disappears, and a calendar shows, just as it should.

Here's the code:

<div>
    <label>Text</label> 
    <input id="fromdate" type="text"/> 
    <input id="fromtime" type="text"/> 
    &nbsp;
    &nbsp;
    <label>Text2</label> 
    <input id="todate" type="text"/>
    <input id="totime" type="text"/> 

    <div class="spinner" id="reportSpinner"></div>
    <script>
        $(function() {
            $( "#fromdate" ).datepicker($.datepicker.regional[ "en-GB" ]).datepicker("option", "dateFormat", 'yy-mm-dd' );
            $( "#todate" ).datepicker($.datepicker.regional[ "en-GB" ]).datepicker("option", "dateFormat", 'yy-mm-dd' );
        });
</script>
</div>

I removed some styles to make the html more readable.

---

You can actually use the $.datepicker.setDefaults() if you want all the datepicker to use a particular locale:

$.datepicker.setDefaults($.datepicker.regional['en-GB']);
$("#fromdate, #todate").datepicker({"dateFormat": 'yy-mm-dd'});

See this in action: http://jsfiddle.net/william/NwPWg/1/.

---

You can't chain datepicker to datepicker:

$( "#fromdate" ).datepicker($.datepicker.regional[ "en-GB" ]).datepicker("option", "dateFormat", 'yy-mm-dd' );

Put your datepicker options right in separately:

$( "#fromdate" ).datepicker($.datepicker.regional[ "en-GB" ]);
$( "#fromdate" ).datepicker("option", "dateFormat", 'yy-mm-dd');