JQuery UI Datepicker not working inside asp:MutiView

Question

Coding with ASP.NET 3.5 C#, jquery.1.4.2, jquery-ui-1.8.2

My textbox is in fourth asp:View of an asp:MultiView which is not active on PageLoad.
My Page is also a content page with a master page. The textbox is created like

<asp:TextBox ID="txtStartDate" runat="server" 
        CssClass="datePicker" 
        MaxLength="20" 
        ReadOnly="true" 
        Width="70px" />

The datepicker is called like

$(document).ready(function () {
    $('.datePicker').live('click', function () {
        $(this).datepicker({ 
            showOn: 'focus',
            changeMonth: true,
            dateFormat: 'dd/mm/yy',
            minDate: '+0d',
            maxDate: '+1y'
            });
    });
});

I am not able to get the datepicker on the first click of the textbox.
What is wrong with this code?

Answer 1

It's not showing the first time because the focus event has already fired, so you need to trigger it again so the focus fires and the datepicker shows, like this:

$(document).ready(function () {
    $('.datePicker').live('click', function () {
        $(this).datepicker({ 
            showOn: 'focus',
            changeMonth: true,
            dateFormat: 'dd/mm/yy',
            minDate: '+0d',
            maxDate: '+1y'
        }).focus();           //add this
    });
});

You can give it a try here. Calling .focus() will fire the event once more, causing the datepicker handler on the event to fire, and it'll show, even the first click.