Javascript 动态表单日期选择器jquery_Javascript_Php_Jquery_Jquery Ui Datepicker

Javascript 动态表单日期选择器jquery

javascript php jquery

Javascript 动态表单日期选择器jquery,javascript,php,jquery,jquery-ui-datepicker,Javascript,Php,Jquery,Jquery Ui Datepicker,我试图创造一个动态的形式。我不知道为什么不能点击日期选择器。日期选择器仅在第一行工作。我已经尝试了一些其他代码，但没有运气。代码如下所示。我排除了PHP代码，因为它只包含用于插入数据库的代码。我的目标是将动态表单存储到数据库中 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

我试图创造一个动态的形式。我不知道为什么不能点击日期选择器。日期选择器仅在第一行工作。我已经尝试了一些其他代码，但没有运气。代码如下所示。我排除了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>


$（函数（）{
$（“.datepicker”）.datepicker({
日期格式：“dd-mm-yy”
});
});
$（函数（）
{
$（文档）.on（'click'，'btn add'，函数（e）
{
e、 预防默认值（）；
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（“”）；
}).on（'click'，'btn remove'，函数（e）
{
$（this）.parents（'.entry:first'）.remove（）；
e、 预防默认值（）；
返回false；
});
});
登录

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

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

如果将新条目的输入设置为日期选择器，则需要删除

hasDatepicker

类才能正常工作，因为您克隆了输入，该类也位于克隆的元素中

下面是一个JSFIDLE：

编辑：更新了fiddler，之所以在选择日期时只更新了第一个输入，是因为它是一个克隆元素，包含与原始元素相同的id，所以在查找datepicker的id时，它会偶然发现一个

这里描述了修复方法。

可能重复的尝试了可能重复的答案，但没有lucki尝试过。它可以工作，但即使单击第二行，也只会对第一行进行更改。修复了答案。