How to add a pop calendar?

Question

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

possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Phil, Jul 30 '15 at 05:06

Manwal · Accepted Answer · 2015-07-30T10:35:00.417

3

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--

edited Jul 30 '15 at 10:35

answered Jul 30 '15 at 05:07

Manwal

23,450
12
63
93

the method what you said is working.But the problem is when ever i select the date in someother textbox,it reflect only in the first text box .I have updated the code pls do see@manwal – sheela balaji Jul 30 '15 at 09:23
So what do you want? When you select date from any input it should reflect only that text box. – Manwal Jul 30 '15 at 09:39
But you can see in my demo, Its working like you want. – Manwal Jul 30 '15 at 09:43
Can you reproduce problem on Jsfiddle? I can't assume everything :( – Manwal Jul 30 '15 at 10:04
Yes great. Now tell me when is unexpected in this fiddle? – Manwal Jul 30 '15 at 10:26
in the fiddle ,if you try to select the date for second set of start date and end date ,it will change in the first set of startdate and endate@manwal – sheela balaji Jul 30 '15 at 10:30
One more question is it possible to add a radio button along with two text box to check wheather the text box is blank or not? @manwal – sheela balaji Jul 30 '15 at 11:11

How to add a pop calendar?

1 Answers1