Add datepicker into dynamic created element

$( 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>' +
'<div class="form-group"> ');  
  
  $( "#joine_duration1" ).datepicker();
  
});



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

Welcome to the forums @tejasweechopde90

Is there a question you have about this piece of code?
It is not clear what the purpose of this topic is, can you clarify that?

Actually, this code is created by me for adding date-picker into dynamic created element, but it’s not work for me
can you help me

it works for me. although I put the CSS in the correct spot first.

but not work for me, are you wrote the html code into script?

this is what I pasted into JSBin:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div class='container'></div>
  <script>
$( 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>' +
'<div class="form-group"> ');  
  
  $( "#joine_duration1" ).datepicker();
  
});
  </script>
</body>
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.