JQuery UI Datepicker not working inside asp:MutiView

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 clic开发者_运维问答k of the textbox.

What is wrong with this code?

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.