Datepicker在动态字段上重复

时间:2016-02-11 12:13:41

标签: javascript jquery twitter-bootstrap

我正在使用tristandenyer的克隆脚本。

$('#btnAdd_4').click(function () {
        var num     = $('.clonedInput_4').length, // Checks to see how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // The numeric ID of the new input field being added, increasing by 1 each time
            newElem = $('#date' + num).clone().attr('id', 'date' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value

        // H2 - section
        newElem.find('.label_date').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Date #' + newNum);

        // date - text
        newElem.find('.label_date').attr('for', 'ID' + newNum + '_date_number');
        newElem.find('.input_date').attr('id', 'ID' + newNum + '_date_number').attr('name', 'ID' + newNum + '_date_number').val('');

    // Insert the new element after the last "duplicatable" input field

        $('#date' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();

    // Enable the "remove" button. This only shows once you have a duplicated section.
        $('#btnDel_4').attr('disabled', false);

    // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
        // This first if statement is for forms using input type="button" (see older demo). DELETE if using button element.
        if (newNum == 5)
        $('#btnAdd_4').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
        // This second if statement is for forms using the new button tag (see Bootstrap demo). DELETE if using input type="button" element.
        if (newNum == 5)
        $('#btnAdd_4').attr('disabled', true).text("You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached 
    });

    $('#btnDel_4').click(function () {
    // Confirmation dialog box. Works on all desktop browsers and idate.
        if (confirm("Are you sure you wish to remove this date number? This cannot be undone."))
            {
                var num = $('.clonedInput_4').length;
                // how many "duplicatable" input fields we currently have
                $('#date' + num).slideUp('slow', function () {$(this).remove();
                // if only one element remains, disable the "remove" button
                    if (num -1 === 1)
                $('#btnDel_4').attr('disabled', true);
                // enable the "add" button. IMPORTANT: only for forms using input type="button" (see older demo). DELETE if using button element.
                $('#btnAdd_4').attr('disabled', false).prop('value', "Add date");
                // enable the "add" button. IMPORTANT: only for forms using the new button tag (see Bootstrap demo). DELETE if using input type="button" element.
                $('#btnAdd_4').attr('disabled', false).text("Add date");});
            }
        return false; // Removes the last section you added
    });
    // Enable the "add" button
    $('#btnAdd_4').attr('disabled', false);
    // Disable the "remove" button
    $('#btnDel_4').attr('disabled', true);

我可以用日期选择器号码重复任何部分。

enter image description here

我们如何使用此插件重新发布datepicker。

enter image description here

我尝试了不同的方法,但我的编码经验不是很大,所以我需要你的帮助。 提前谢谢。

1 个答案:

答案 0 :(得分:0)

我们通过添加

解决了这个问题
newElem.find("input[type=text]").datepicker();

并且在选择后关闭datepicker时没有问题,我们添加了autoclose: true

代码的最后一种形式是这样的。

newElem.find("input[type=text]").datepicker({autoclose: true});