动态表单日期选择器 jquery

Question

我尝试创建一个动态表单。我不确定为什么无法单击日期选择器。 Datepicker 仅适用于第一行。我已经尝试了一些其他代码但没有运气。下面提供了代码。我排除了 PHP 代码，因为它只包含用于插入数据库的代码。我的目标是将动态表单存储到数据库中。

<!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>

Answer 1

您需要在每次创建时初始化日期选择器，如下所示：

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

使新条目的输入成为日期选择器，需要删除 hasDatepicker class 才能正常工作，因为您克隆了输入，class 在也克隆了元素。

这是一个 jsfiddle：adding dynamic datepickers

编辑：更新了提琴手，选择日期时只更新第一个输入的原因是因为它是一个克隆元素，包含与原始元素相同的 ID，因此在查找日期选择器的 ID 时，它偶然发现了一个。

此处描述了修复。 Datepicker selected value always goes on the first textbox

动态表单日期选择器 jquery

dynamic form datepicker jquery

javascript

php

jquery

jquery-ui-datepicker