CODEWITHSUNDEEP
asp.netjqueryjquery-uidatepicker
codeandcloud
codeandcloud

Reputation: 55210

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 click of the textbox.
What is wrong with this code?

Upvotes: 0

Views: 1312

Answers (1)

Nick Craver
Nick Craver

Reputation: 630429

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.

Upvotes: 2

Related Questions