dynamic form datepicker jquery

Question

I tried to create a dynamic form. Im not sure why the datepicker cant be clicked. Datepicker only work on first row. I already try few other code but no luck. The code is provided below. I excluded the PHP code because it only consist of code for insert into database. My target is to store the dynamic form into database.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
    <script>
        $(function(){
            $(".datepicker").datepicker({
                dateFormat: 'dd-mm-yy'
            });
        });
        $(function()
        {
            $(document).on('click', '.btn-add', function(e)
            {
                e.preventDefault();
                var controlForm = $('.controls .d1:first'),
                    currentEntry = $(this).parents('.entry:first'),
                    newEntry = $(currentEntry.clone()).appendTo(controlForm);
                newEntry.find('input').val('');
                controlForm.find('.entry:not(:last) .btn-add')
                    .removeClass('btn-add').addClass('btn-remove')
                    .removeClass('btn-success').addClass('btn-danger')
                    .html('<span class="fa fa-minus"></span>');
            }).on('click', '.btn-remove', function(e)
            {
                $(this).parents('.entry:first').remove();
                e.preventDefault();
                return false;
            });
        });
    </script>
</head>
<body>
<form method="POST" action="" name="loginin">
<div class="controls">
    <div class="d1">
        <div class="entry input-group">
            <input list="pronama"  name="proPlace[]" type="text" placeholder="Place" class="form-control">
            <input type="text" class="datepicker" class="form-control" name="date[]">
            <span class="input-group-btn">
                <button class="btn btn-success btn-add" type="button">
                    <span class="fa fa-plus"></span>
                </button>
            </span>
        </div>
    </div>
</div>
<button type="submit" name="login" class="btn btn-lg btn-success btn-block">Sign In</button>
</form>
</body>
</html>

Possible duplicate of https://stackoverflow.com/questions/32694306/use-jquery-datepicker-on-dynamically-created-fields — 04FS, Mar 25 '19 at 09:24

Hagai Wild · Accepted Answer · 2019-03-26T14:04:04.937

You need to initialize the datepicker with each creation, like so:

newEntry.removeAttr('id');
$(".datepicker", newEntry)
   .removeAttr('id')
   .removeClass('datepicker hasDatepicker')
   .datepicker({
       dateFormat: 'dd-mm-yy'
   });

making the new entry's input a date picker, the removal of the hasDatepicker class is needed for this to work, because you clone the input, the class is in the cloned element too.

here's a jsfiddle: adding dynamic datepickers

EDIT: updated the fiddler, the reason only the first input was updated on selecting a date, is because it's a cloned element, containing the same id as the original, so when looking for the id of the datepicker, it stumbles upon the one.

the fix was described here. Datepicker selected value always goes on the first textbox

i had try this. it work but changes only happen for first row even if i click on second row. — PHP1.0, Mar 26 '19 at 12:29

dynamic form datepicker jquery

1 Answers1