I have a form which has the possibility to dynamically create new row with inputs, the date input on each new row should have a datepicker. I have this almost working, but when a new row with inputs is created, the datepicker won't work anymore on the date fields that are already existing. I have played the whole day to find out what i`m doing wrong, but i just can't see how to fix this.
Here's fiddle -> http://jsfiddle.net/HermesTrismegistus/vdFaH
My form looks like this:
<table id="productTable" class="table table-striped table-condensed">
<thead>
<tr>
<th>Product</th>
<th>Datum</th>
<th>Tijd</th>
<th>Minuten</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="products" class="input-medium" name="products[]" type="text" /></td>
<td><input id="date" class="datepick input-mini" name="date[]" type="text" /></td>
<td><input id="time" class="input-mini" name="time[]" type="text" /></td>
<td><input id="minutes" class="input-mini" name="minutes[]" type="text" /></td>
<td><a id="addnew" href=""><i class="icon-plus"></i></a></td>
</tr>
</tbody>
</table>
The jquery i do have, looks like this:
$(function(){
// start a counter for new row IDs
// by setting it to the number
// of existing rows
$('.datepick').datepicker();
var newRowNum = 0;
// bind a click event to the "Add" link
$('#addnew').click(function(){
// increment the counter
newRowNum = $(productTable).children('tbody').children('tr').length +1;
// get the entire "Add" row --
// "this" refers to the clicked element
// and "parent" moves the selection up
// to the parent node in the DOM
var addRow = $(this).parent().parent();
// copy the entire row from the DOM
// with "clone"
var newRow = addRow.clone();
// set the values of the inputs
// in the "Add" row to empty strings
$('input', addRow).val('');
// insert a remove link in the last cell
$('td:last-child', newRow).html('<a href="" class="remove"><i class="icon-minus"><\/i><\/a>');
// insert the new row into the table
// "before" the Add row
addRow.before(newRow);
// add the remove function to the new row
$('a.remove', newRow).click(function(){
$(this).closest('tr').remove();
return false;
});
$('#date', newRow).each(function(i){
var newID = 'date_' + i;
$(this).attr('id',newID);
});
// prevent the default click
return false;
});
If you want to set a value for an input type 'Date', then it has to be formatted as "yyyy-MM-dd" (Note: capital MM for Month, lower case mm for minutes). Otherwise, it will clear the value and leave the datepicker empty.
An inline date picker means that the booking calendar is already open when the screen loads. This article will walk you through the quick and easy process of adjusting the standard configuration. EXAMPLE: https://bookthatapp-demo.com/products/piano-lessons. 1. In Shopify Admin, open your current theme.
$('#start_date'). datetimepicker({timeFormat: "HH:mm:ss", dateFormat:"dd-mm-yy", constrainInput: false, maxDate: maxdate}); API information constrainInput + API documentation for further documentation if you need any.
Try this, when you add a row, destroy all the datepicker instances and then rebind the datepicker after you append a new row.
jsFiddle example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With