CODEWITHSUNDEEP
jqueryhtml
sheela balaji
sheela balaji

Reputation: 119

How to add a pop calendar?

I have add button it will add a startdate textbox and end date textbox along with a pop calendar.But the calendar pop up is not working.

UPDATE

$(document).ready(function () {
$(".datepicker").each(function () {
    $(this).datepicker();
});
$("#add").click(function () {
    $(".container").append('<div class= "Cycleone"> <table> <tr> <td> <label ID="lblStartDate">Start Date </label> </td> <td> <input type="text" id="txtStartDate" class="datepicker"/><label id="lblEndDate" >End Date</label></td><td><input type="text" id="txtEndDate" class="datepicker"/></td></tr></table></div>');
    $(".datepicker").datepicker();
})
});

Button

<div class="button">
<input type="button" id="add" name="btnAddAddress" value="Add"  />

Please provide a example if possible.Thank you

Upvotes: 2

Views: 343

Answers (1)

Manwal
Manwal

Reputation: 23836

After adding to pop you can initialize datepicker:

$("#btnAdd").click(function() {
    var addelement = $('<div class= "Cycle"> <table> <tr> <td> <label ID="lblStartDate">Start Date </label> </td> <td> <input type="text" id="txtStartDate" class="datepicker"/><label id="lblEndDate" >End Date</label></td><td><input type="text" id="txtEndDate" class="datepicker"/></td></tr></table></div>');
    $(this).after(addelement);
    $(".datepicker").datepicker();//here
});

Reason: Because you are initializing datepicker on Document ready but pop datepicker is not yet present in DOM.

--Working DEMO--

Updates

You are facing problem because when you adding input boxes you are always giving same id txtStartDate, txtEndDate even for label also. ID should be unique across HTML page. Just remove id from JS code:

--Expected DEMO--

Upvotes: 3

Related Questions