Input time flatpickr not working in javascript appending
Question
I have a table with a time input field using flatpickr. The time input is in a table format. The first 2 static time input fields are working. However, as I append the row with the time input field, the flatpickr does not work. can anyone guide me?
$('.from').flatpickr({ enableTime: true, noCalendar: true, time_24hr: true, minuteIncrement: 30 }); $('.to').flatpickr({ enableTime: true, noCalendar: true, time_24hr: true, minuteIncrement: 30 }); $(document).on("click","#addmore",function() { var html = "<tr>" + "<td><input type='time' class='form-control flatpickr from' name='from[]' ></td>" + "<td><input type='time' class='form-control flatpickr to' name='to[]' ></td>" + "</tr>"; // Append data $('tbody').append(html); }); <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script> </head> <body> <div class="container"> <div class="row justify-content-center"> <table> <tbody> <tr> <td><input type="time" class="form-control flatpickr from" name="from[]"></td> <td><input type="time" class="form-control flatpickr to" name="to[]"></td> </tr> <tr> <td><input type="time" class="form-control flatpickr from" name="from[]"></td> <td><input type="time" class="form-control flatpickr to" name="to[]"></td> </tr> </tbody> </table> <input type='button' class='btn btn-warning' value='+ Add more rows' id='addmore'> </div> </div> </body> </html>
1 answers
solution1
0 2022-09-12 08:12:05
I managed to solve it. I simply need to call the flatpickr again after appending a new row in the table body.
const conf = { enableTime: true, noCalendar: true, time_24hr: true, minuteIncrement: 30 }; flatpickr(".from", conf); flatpickr(".to", conf); $(document).on("click","#addmore",function() { var html = "<tr>" + "<td><input type='time' class='form-control flatpickr from' name='from[]' ></td>" + "<td><input type='time' class='form-control flatpickr to' name='to[]' ></td>" + "</tr>"; // Append data $('tbody').append(html); //Call flatpickr again after adding a new row flatpickr(".from", conf); flatpickr(".to", conf); }); <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script> </head> <body> <div class="container"> <div class="row justify-content-center"> <table> <tbody> <tr> <td><input type="time" class="form-control flatpickr from" name="from[]"></td> <td><input type="time" class="form-control flatpickr to" name="to[]"></td> </tr> <tr> <td><input type="time" class="form-control flatpickr from" name="from[]"></td> <td><input type="time" class="form-control flatpickr to" name="to[]"></td> </tr> </tbody> </table> <input type='button' class='btn btn-warning' value='+ Add more rows' id='addmore'> </div> </div> </body> </html>
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.
Related Question
Javascript appending input fields
Appending forms in javascript not working
Appending Input type using javascript
Why Javascript is not working under appending?
Select new input to fire flatpickr
Appending li content into form input value in javascript
appending an input to a HTML form with JQuery not working
Javascript: Appending form input into a table upon submission
Appending an array from user input in Javascript
Appending a row to a JavaScript array not working as expected
Related Tags