javascript jquery克隆日期选择器不工作

i2loujxw 于 2023-05-05 发布在 Java

关注(0)|答案(3)|浏览(171)

正在使用日期选择器进行克隆。我已经在stackoverflow中搜索了我的问题，我没有得到正确的东西。当用户从原始日期中单击日期时，它按预期工作，但一旦用户单击克隆div中的addmore按钮，日期选择器就不工作了。我试着给.destroy的结果并没有像预期的那样。这可能是重复的问题，但正如我所说，解决方案在我的情况下不起作用。
下面是jquery代码。

var currentDate = new Date();
$(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
    dateFormat: "mm-dd-yy",
    changeMonth: true,
    yearRange: "-100:+0",
    changeYear: true,
    maxDate: new Date(),
    showButtonPanel: false,
    beforeShow: function () {
        setTimeout(function (){
        $('.ui-datepicker').css('z-index', 99999999999999);

        }, 0);
    }
});
$(".deg_date").datepicker("setDate", currentDate);
var count=0;
    $(document).on("click", ".edu_add_button", function () { 
        alert("checj");
        var $clone = $('.cloned-row1:eq(0)').clone(true,true);
        //alert("Clone number" + clone);
        $clone.find('[id]').each(function(){this.id+='someotherpart'});
        $clone.find('.btn_more').after("<input type='button' class='btn_less1' id='buttonless'/>")
        $clone.attr('id', "added"+(++count));
        $clone.find(".school_Name").attr('disabled', true).val('');
        $clone.find(".degree_Description").attr('disabled', true).val('');
        $clone.find("input.deg_date").datepicker();
        $(this).parents('.educat_info').after($clone);
    });
    $(document).on('click', ".btn_less1", function (){
        var len = $('.cloned-row1').length;
        if(len>1){
            $(this).closest(".btn_less1").parent().parent().parent().remove();
        }
    });

这是小提琴link
先谢谢你了

JavaScript

来源：https://stackoverflow.com/questions/32637674/jquery-clone-date-picker-not-working

3条答案

按热度按时间

sg2wtvxw1#

Jquery datepicker在初始化时为它绑定的输入字段创建基于UUID的ID属性。你克隆这些元素会导致更多的元素具有相同的ID（jQuery不喜欢）或不同的ID（如果你的克隆例程管理的话）（* 这意味着datepicker不知道克隆 *）。
尝试像这样更新你的js代码

$clone.find("input.deg_date")
    .removeClass('hasDatepicker')
    .removeData('datepicker')
    .unbind()
    .datepicker({
        dateFormat: "mm-dd-yy",
        changeMonth: true,
        yearRange: "-100:+0",
        changeYear: true,
        maxDate: new Date(),
        showButtonPanel: false,
        beforeShow: function() {
            setTimeout(function() {
                $('.ui-datepicker').css('z-index', 99999999999999);

            }, 0);
        }
    });

这是更新的JSFIDDLE。希望这对你有帮助。

赞(0）回复(0）举报 2023-05-05

inkz8wg92#

你可以重新启动约会选择器
在单击事件上最后放置日期选择器行

$(document).on("click", ".edu_add_button", function () { 
  ...
  ...
  ...
  ...
  $(".deg_date").datepicker("setDate", currentDate);
});

会成功的！！！

赞(0）回复(0）举报 2023-05-05

6bc51xsx3#

您只需使用datepicker函数以format作为参数来重新初始化datepicker元素。这是我的箱子
你不必毁了它或类似的东西。
我配置了显示【今日】按钮、【清除】按钮，并高亮显示今日。
我还在datepicker输入旁边配置了一个图标，每当用户单击图标时，datepicker UI组件就会显示出来。

form.find('.datepickerClass').datepicker({
        format: 'd-m-Y',
        autoclose: true,
        todayBtn: 'linked',
        clearBtn: true,
        todayHighlight: true,
    });

    // Handle date picker button click event
    form.find('.datepickerClass').each(function() {
        $(this).next('.input-group-addon').click(function() {
            $(this).prev('input').focus();
        });
    });

Datepicker UI Component image sample
对我很有效。永远！！！

赞(0）回复(0）举报 2023-05-05

我来回答

javascript jquery克隆日期选择器不工作

3条答案

相关问题

热门标签

最新问答