How to create a datepicker in a dynamically created element

Question

Jquery code which appends the element

$(container).append(
 '<lable class="control-label col-md-3">Joine Duration</lable>' +
 '<div class="col-md-4">' +
 '<input type=text  name="joine_duration[]" class="input form-control"   id="joine_duration1" placeholder="" /></div></div>' +
  '<div class="form-group"> ');

Possible duplicate of [putting datepicker() on dynamically created elements - JQuery/JQueryUI](http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui) — Mario Santini, Dec 05 '16 at 12:19

Andy · Accepted Answer · 2016-12-06T06:07:07.183

-2

Try this. You had an extra </div> in your dynamic code

$( document ).ready(function() {     
  $(".container").append(
'<label class="control-label col-md-3">Joine Duration</label>' +
'<div class="col-md-4">' +
'<input type=text  name="joine_duration[]" class="input form-control datepicker"  size="11" title="D-MMM-YYYY" id="joine_duration1" placeholder="" /></div>' +
'<div class="form-group"> ');       
  $( "#joine_duration1" ).datepicker();      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class='container'></div>

edited Dec 06 '16 at 06:07

answered Dec 05 '16 at 12:17

Andy

521
3
6
22

this is the code for dynamic created textbox i want to putting datepicker in it – Tejaswee Dec 06 '16 at 04:33
after click on textbox it not showing calendar, I am working on codeigniter – Tejaswee Dec 07 '16 at 09:01
Hi Tejaswee, can you please explain why this code does not work? – Andy Dec 08 '16 at 12:30
this code is working Andy, in my code i made mistake in jquery script class , now its working very well – Tejaswee Dec 12 '16 at 06:09

How to create a datepicker in a dynamically created element

1 Answers1