datepicker only visible once in asp.net using jquery

Question

I am working on adding a date picker to date fields in my aspx page. What I want to accomplish here is to attach datepicker to the id of the input. These fields are created dynamically. I am having issues with the date picker as it is visible the first time I click on the input but wont show up again until page refresh. I would appreciate any help. Here is what I have tried.

My input field:

<input name="ctl00$MainContent$SubsModifier$tbDate" type="text" value="06/21/2016"  onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$SubsModifier$tbDate\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ctl00_MainContent_SubsModifier_tbDate" class="form-control">

jQuery:

$(function () {
    $("[id*=tbDate]").datepicker({
        buttonImageOnly: true,
        buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'
    });
});

I have noticed that "hasDatePicker" is visible in the class the first time and is removed when I select a date from the datepicker.

Answer 1

I see you have class = "form-control" as input attribute. Add additional pseudo class class = "form-control date-picker" and try then:

$(".date-picker").datepicker();

Answer 2

You can try to wrap the method in a function

function RunMeAfterControlsAreGenerated() {
    $("[id$=tbDate]").datepicker({
        buttonImageOnly: true,
        buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'
    });
}

Then call it after you dynamically generate your controls on Code Behind

ScriptManager.RegisterStartupScript(this, this.GetType(), "RunMe", "RunMeAfterControlsAreGenerated();",true);

Answer 3

Thank you to @Felipe Deguchi and @arturas for their help. I modified arturas answer into the following and it is working as expected. Here is what I did.

$('body').on('focus', ".date-picker", function () {
    $(".date-picker").datepicker();
});