I want to add date picker dynamically in input field using jquery. It works for 1st text field. When I add a field it does not work. How can I fix that? Thanks In advance.
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><input type="text" class="startdate form-control"/></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
Jquery
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" class="startdate form-control"/></td>
<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
datepicker
$( ".startdate" ).datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: 0,
});
To implement datepicker on dynamically created input use on()
. Please also notice the use of Template literals
inside append()
which is more cleaner and simpler:
$(document).ready(function(){ var i=1; $('#add').click(function(){ i++; $('#dynamic_field').append(`<tr id="row${i}"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" class="startdate form-control"/></td> <td><button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove">X</button></td></tr>`); }); $(document).on('click', '.btn_remove', function(){ var button_id = $(this).attr("id"); $('#row'+button_id+'').remove(); }); }); $(document).on("focus", ".startdate", function(){ $(this).datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: 0, }); });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td> <td><input type="text" class="startdate form-control"/></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table>
Add simply a datepicker() function to your last created input ,
using
$('#dynamic_field').last("tr").find(".startdate").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: 0,
});
also ,when removing this input you have also to destroy datepicker attached to it as below
$( '#row' + button_id ).datepicker( "destroy" );
$( '#row' + button_id ).removeClass("hasDatepicker").removeAttr('id');
See below Snippet :
$(function() { var i = 1; $('#add').click(function() { i++; $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" class="startdate form-control"/></td> <td > <button type = "button" name = "remove"id = "' + i + '" class = "btn btn-danger btn_remove" > X </button></td ></tr>'); $('#dynamic_field').last("tr").find(".startdate").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: 0, }); }); $(".startdate").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: 0, }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); $( '#row' + button_id ).datepicker( "destroy" ); $( '#row' + button_id ).removeClass("hasDatepicker"); $('#row' + button_id+'' ).remove(); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" /> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td> <td><input type="text" class="startdate form-control" /></td> <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.