Saturday, March 22, 2014

jQuery UI - DatePicker was not working for me

Hi,

Recently I came across a problem, where a text box was not getting converted into jQuery UI DatePicker control. After spending an hour I realized the mistake. It was happening because of using existing html controls as template to render same set of controls to render data like repeater control in ASP.NET.

There was set of controls defined as template as shown below:

<div class='template"'>
        <div class='row'>
            <div class='label'>
                From Date</div>
            <div class='text'>
                <input type="text" id='from-date' class='date-control' />
            </div>
        </div>
        <div class='row'>
            <div class='label'>
                To Date</div>
            <div class='text'>
                <input type="text" id='to-date' class='date-control' />
            </div>
        </div>
    </div>


While loading a page, in jquery load event, datepicker function was called to render all controls having class 'date-control' as datepicker control.

This function call was converting the date-control textboxes into datepicker which were part of the template.

Then when we used these converted controls as template, we were not able to convert those control as datepicker control.

Because as per jQuery UI api, those were the controls converted into datepicker. To make this work correctly we had to change the css class of to something else and we could call datepicker function to make those textboxes as datepicker.

Hope this will help somebody having similar problem.

Sachin Pawar