I have form which contain Add more field button ,which dynamically adds new datepicker's whenever i click Add More field button.
The problem is ,Currently date field in the datepicker display the current date. But when i add new Datepicker by clicking on the Add more Field Button , it adds one more Datepicker but this time it resets the previous value of Datepicker which i had set manually.
Below is my code: html
<div id="container">
<input class="datepick" type="text"></input><button class="add">Add</button>
<input
</div>
javascript
$(".datepick").datepicker();
$(".datepick").datepicker().datepicker("setDate", new Date());
$(document).on('click', '.add', function() {
var appendTxt = '<input class="datepick" type="text" /><button class="add">Add</button>';
$("#container").append(appendTxt);
$(".datepick").datepicker();
$(".datepick`enter code here`").datepicker().datepicker("setDate", new Date());
});
Because of this line:
$(".datepick").datepicker();
All inputs which have the class .datepick will reinitialize. You should do something like this:
$(".datepick").last().datepicker();
or
$(".datepick:last").datepicker();
after you add the new input.datepick. This was the simple solution.
If you have any other .datepick's in another container after this container, this won't work too. You should be very specific about the appended datepicker element.
You should do this :
var appendTxt = '<input class="datepick" type="text" /><button class="add">Add</button>';
var newInput = $(appendTxt).appendTo("#container");
newInput.datepicker();
newInput.datepicker().datepicker("setDate", new Date());