bootstrap datepicker funktioniert nicht, wenn es geklont wird

Mit jquery clone() wiederhole ich div Abschnitt meines Dokuments. Dieses div enthält auch Bootstrap-Datumsauswahl. Aber geklont div's datepicker wird nicht funktionieren. Ich benutze dieses Datepicker https://eonasdan.github.io/bootstrap-datetimepicker/bootstrap datepicker funktioniert nicht, wenn es geklont wird

Hinweis: In Code-Snippet fügen Sie mehrere Dateien in wählen Sie die Option, dann sehen Sie nur zusätzliche Datumsauswahl.

/* Depending on number of documents description box and datepicker will repeat */ 
 

 
$("#docsUpload").change(function() { 
 
    $("#multiShow").empty();     // removes child elements 
 
    var ele = document.getElementById($(this).attr('id')); 
 
    var result = ele.files; 
 
    var ff = result[0]; 
 
    $("#ff").html("<strong> File Name : </strong>"+ ff.name); 
 

 
    for(var x = 0;x< result.length-1;x++){ 
 
     var fle = result[x+1]; 
 
     $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>"); 
 
     $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name); 
 
     $('#multiShow').append("</div><div class='col-sm-3'></div></div>"); 
 
     $("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow'); 
 
    } 
 
}); 
 

 

 
/* depending on selection box type of date changes */ 
 
$(document).ready(function(){ 
 
    $(".static").show(); // always display on page load 
 
    $(".period").on('change',function(changeEvent){ //selection box value changed 
 
    // var realId = $(".period").closest("div[id]").attr("id"); //get id 
 
    var realId = $(changeEvent.target).closest("div[id]").attr("id"); 
 
    $('#'+realId+' .dateSelector').hide(); 
 
    //alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll' 
 

 
    var operation = '.'+this.value; 
 
    $('#'+realId+' '+operation).show(); 
 

 
    });   // on period change 
 
});  // document ready state 
 

 

 
/* Format of datepicker */ 
 
$(document).ready(function(){ 
 
    $('.datetimepicker1').datetimepicker({ 
 
     format : "DD/MM/YYYY" 
 
    }); 
 
    $('.datetimepicker2').datetimepicker({ 
 
     format : "MM/YYYY" 
 
    }); 
 
    $('.datetimepicker3').datetimepicker({ 
 
     format : 'YYYY' 
 
    }); 
 
    $('.datetimepicker5').datetimepicker({ 
 
     format : 'YYYY' 
 
    }); 
 
    $('.datetimepicker7').datetimepicker({ 
 
    format : 'YYYY' 
 
    }); 
 
    $('.datetimepicker9').datetimepicker({ 
 
     format : "DD/MM/YYYY" 
 
    }); 
 
    $('.datetimepicker10').datetimepicker({ 
 
    format : "DD/MM/YYYY" 
 
    }); 
 
});

.dateSelector{ 
 
    display: none; 
 
    } 
 

 
    h1{ 
 
    color:#2F4F4F; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script> 
 

 

 
<div class="container-fluid"> 
 

 

 

 

 
<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>" 
 
    method="POST" enctype="multipart/form-data" onsubmit="return validateForm()"> 
 
<hr/> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6"> 
 
    <div class="form-group has-feedback"> 
 
    <label for="upload">Upload Files : </label> 
 
    <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" /> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div><!-- .row --> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6"> 
 
    <div class="form-group has-feedback"> 
 
    <span id="ff"></span> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div><!-- .row --> 
 

 

 
<div id="selectAll"> 
 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6"> 
 
    <div class="form-group has-feedback"> 
 
    <input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" /> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div><!-- .row --> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6"> 
 
    <div class="form-group"> 
 
    <label for="upload"> Select Type & Date of document below: </label> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div> <!-- .row --> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-2"> 
 
    <div class="form-group"> 
 
    <select name="period" class="period"> 
 
    <option value="static" selected="selected">Static</option> 
 
    <option value="monthly">Monthly</option> 
 
    <option value="quaterly">Quaterly</option> 
 
    <option value="semester">Semester</option> 
 
    <option value="yearly">Yearly</option> 
 
    <option value="other">Other</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<!-- begin : datepicker --> 
 
<div class="col-sm-4 dateSelector static"> 
 
    <div class="input-group date datetimepicker1"> 
 
     <input type="text" name="staticDate[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
    </div> 
 
</div> 
 

 
<div class="col-sm-4 dateSelector monthly"> 
 
<div class="input-group date datetimepicker2"> 
 
    <input type="text" name="monthlyDate[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> 
 
</div> 
 

 
<div class="dateSelector quaterly"> 
 
<div class="col-sm-2"> 
 
<select name="periodQuater[]"> 
 
    <option value="first">January - March</option> 
 
    <option value="second">April - June</option> 
 
    <option value="third">July - September</option> 
 
    <option value="fourth">October - December</option> 
 
</select><br/><br/> 
 
</div> 
 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker3"> 
 
    <input type="text" name="quaterlyDate" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="dateSelector semester"> 
 
<div class="col-sm-2"> 
 
<select name="periodSemester[]"> 
 
    <option value="semfirst">April - September </option> 
 
    <option value="semsecond">October - March</option> 
 
</select><br/><br/> 
 
</div> 
 

 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker5"> 
 
    <input type="text" name="semesterDate[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="dateSelector yearly"> 
 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker7"> 
 
    <input type="text" name="yearDate[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="dateSelector other"> 
 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker9"> 
 
    <input type="text" name="otherDateF[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> <br/></div> 
 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker10"> 
 
    <input type="text" name="otherDateS[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div></div> 
 
</div> 
 

 

 
<div class="col-sm-3"></div> 
 
</div> <!-- .row for selector--> 
 
</div> <!-- #selectAll --> 
 

 
<div id="multiShow"> </div> 
 

 
<!-- end : datepicker --> 
 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6 form-group"> 
 
<br/> 
 
<button type="submit" class="btn btn-primary form-control"> Submit </button> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div> 
 
</form> 
 
</div> <!-- .container -->

Quelle

2017-01-30 WeAreRight

Wo haben Sie 'bootstrap-datetimepicker.min.js' und' bootstrap-datetimepicker.min.css' eingeschlossen, da Ihr GitHub-Link das enthielt. –

@Curiousdev danke für das Hinzufügen dieser Dateien. – WeAreRight

@JoneDotosvky Sie sind immer willkommen, finden Sie auch meine Antwort für dieses Problem – Curiousdev

$("#docsUpload").change(function() { 
 
debugger; 
 
    $("#multiShow").empty();     // removes child elements 
 
    var ele = document.getElementById($(this).attr('id')); 
 
    var result = ele.files; 
 
    var ff = result[0]; 
 
    $("#ff").html("<strong> File Name : </strong>"+ ff.name); 
 

 
    for(var x = 0;x< result.length-1;x++){ 
 
     var fle = result[x+1]; 
 
     $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>"); 
 
     $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name); 
 
     $('#multiShow').append("</div><div class='col-sm-3'></div></div>"); 
 
     $("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow'); 
 
    } 
 

 
     $('.dpstatic').datetimepicker({ 
 
     format : "DD/MM/YYYY" 
 
    }); 
 
    $('.dpmonthly').datetimepicker({ 
 
     format : "MM/YYYY" 
 
    }); 
 
    $('.dpquaterly').datetimepicker({ 
 
     format : 'YYYY' 
 
    }); 
 
    $('.dpsemester').datetimepicker({ 
 
     format : 'YYYY' 
 
    }); 
 
    $('.dpyearly').datetimepicker({ 
 
    format : 'YYYY' 
 
    }); 
 
    $('.dpother').datetimepicker({ 
 
     format : "DD/MM/YYYY" 
 
    }); 
 
    $('.dpother').datetimepicker({ 
 
    format : "DD/MM/YYYY" 
 
    }); 
 

 

 

 
}); 
 

 

 
/* depending on selection box type of date changes */ 
 
$(document).ready(function(){ 
 
    $(".static").show(); // always display on page load 
 
    $("body").on('change','.period',function(changeEvent){ //selection box value changed 
 
    // var realId = $(".period").closest("div[id]").attr("id"); //get id 
 
    var realId = $(changeEvent.target).closest("div[id]").attr("id"); 
 
    $('#'+realId+' .dateSelector').hide(); 
 
    //alert('#'+realId+' '+'.dateSelector'); // display id only show 'selectAll' 
 

 
    var operation = '.'+this.value; 
 
    $('#'+realId+' '+operation).show(); 
 

 
    });   // on period change 
 
});  // document ready state 
 

 

 
$(document).ready(function(){ 
 
    $('.dpstatic').datetimepicker({ 
 
     format : "DD/MM/YYYY" 
 
    }); 
 
    $('.dpmonthly').datetimepicker({ 
 
     format : "MM/YYYY" 
 
    }); 
 
    $('.dpquaterly').datetimepicker({ 
 
     format : 'YYYY' 
 
    }); 
 
    $('.dpsemester').datetimepicker({ 
 
     format : 'YYYY' 
 
    }); 
 
    $('.dpyearly').datetimepicker({ 
 
    format : 'YYYY' 
 
    }); 
 
    $('.dpother').datetimepicker({ 
 
     format : "DD/MM/YYYY" 
 
    }); 
 
    $('.dpother').datetimepicker({ 
 
    format : "DD/MM/YYYY" 
 
    }); 
 

 
});

.dateSelector{ 
 
    display: none; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script> 
 

 

 

 
<div class="container-fluid"> 
 

 
<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>" 
 
    method="POST" enctype="multipart/form-data" onsubmit="return validateForm()"> 
 
<hr/> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6"> 
 
    <div class="form-group has-feedback"> 
 
    <label for="upload">Upload Files : </label> 
 
    <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" /> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div><!-- .row --> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6"> 
 
    <div class="form-group has-feedback"> 
 
    <span id="ff"></span> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div><!-- .row --> 
 

 

 
<div id="selectAll"> 
 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6"> 
 
    <div class="form-group has-feedback"> 
 
    <input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" /> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div><!-- .row --> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6"> 
 
    <div class="form-group"> 
 
    <label for="upload"> Select Type & Date of document below: </label> 
 
    </div> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div> <!-- .row --> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-2"> 
 
    <div class="form-group"> 
 
    <select name="period" class="period"> 
 
    <option value="static" selected="selected">Static</option> 
 
    <option value="monthly">Monthly</option> 
 
    <option value="quaterly">Quaterly</option> 
 
    <option value="semester">Semester</option> 
 
    <option value="yearly">Yearly</option> 
 
    <option value="other">Other</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<!-- begin : datepicker --> 
 
<div class="col-sm-4 dateSelector static"> 
 
    <div class="input-group date datetimepicker dpstatic"> 
 
     <input type="text" name="staticDate[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
    </div> 
 
</div> 
 

 
<div class="col-sm-4 dateSelector monthly"> 
 
<div class="input-group date datetimepicker dpmonthly"> 
 
    <input type="text" name="monthlyDate[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> 
 
</div> 
 

 
<div class="dateSelector quaterly"> 
 
<div class="col-sm-2"> 
 
<select name="periodQuater[]"> 
 
    <option value="first">January - March</option> 
 
    <option value="second">April - June</option> 
 
    <option value="third">July - September</option> 
 
    <option value="fourth">October - December</option> 
 
</select><br/><br/> 
 
</div> 
 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker dpquaterly"> 
 
    <input type="text" name="quaterlyDate" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="dateSelector semester"> 
 
<div class="col-sm-2"> 
 
<select name="periodSemester[]"> 
 
    <option value="semfirst">April - September </option> 
 
    <option value="semsecond">October - March</option> 
 
</select><br/><br/> 
 
</div> 
 

 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker dpsemester"> 
 
    <input type="text" name="semesterDate[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="dateSelector yearly"> 
 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker dpyearly"> 
 
    <input type="text" name="yearDate[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="dateSelector other"> 
 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker dpother"> 
 
    <input type="text" name="otherDateF[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div> <br/></div> 
 
<div class="col-sm-2"> 
 
<div class="input-group date datetimepicker dpother"> 
 
    <input type="text" name="otherDateS[]" class="form-control" /> \t <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
</div></div> 
 
</div> 
 

 

 
<div class="col-sm-3"></div> 
 
</div> <!-- .row for selector--> 
 
</div> <!-- #selectAll --> 
 

 
<div id="multiShow"> </div> 
 

 
<div class="row"> 
 
<div class="col-sm-3"></div> 
 
<div class="col-sm-6 form-group"> 
 
<br/> 
 
<button type="submit" class="btn btn-primary form-control"> Submit </button> 
 
</div> 
 
<div class="col-sm-3"></div> 
 
</div> 
 
</form> 
 
</div> <!-- .container -->

Führen Sie das Snippet zu prüfen, welche Änderungen ich habe auf Original-Code gemacht vergleichen.

Änderungen Ich habe gemacht:

(1) Als Punkt aus durch Curiousdev

wahr entfernen von clone()
in Periode wiederholen alle Datumsformate

(2) Dies ist sehr wichtig,

Fügen Sie jedem Kalendertyp ein eindeutiges Klassenelement hinzu. JSFiddle auschecken und nach dpstatic, dpmonthly, dpquaterly, dpsmester, dpyearly und dpother suchen. Ohne diesen Elementekalender werden die entsprechenden Datumsformate nicht angezeigt, und manchmal wird sogar kein Kalender angezeigt.

Für Geige: https://jsfiddle.net/rv285q8x/

Danke @Curiousdev und @Ataur Rahman Munna für wertvolle Informationen und Hilfe.

Quelle

2017-02-01 08:30:02 WeAreRight

Nach Datumsauswahl zu DOM Klonen müssen Sie folgende Dinge tun müssen, um picker auf die neu erstellte Elemente zu binden i gleiche class an alle picker inputs und als tun gleiche anzuwenden empfehlen wie folgt, um den Datepicker zu binden.

Sie können auch diese documentation für weitere Informationen

$('.datepicker').datepicker('update');

Quelle

2017-01-30 11:23:51 Curiousdev

Ich habe die 'datepickerForAll' Klasse allen Eingabefeldern von Daten und $ ('.datepickerForAll') hinzugefügt. Datepicker ('update'); im Drehbuch. Trotzdem funktioniert es nicht. Ich hoffe, du hast das nur gemeint. – WeAreRight

können Sie bitte etwas Code teilen, auf welche Weise Sie diesen Datepicker klonen, damit es einfacher ist, herauszufinden, wo etwas falsch läuft? – Curiousdev

der gesamte Code ist in den obigen Schnipsel. Ich fügte Kommentare im JavaScript-Abschnitt hinzu, um es klarer zu verstehen. Was oben Code ist, hängt von der Anzahl der Dokumente ab, die ausgewählt wurden, und das Textfeld wird wiederholt. Wenn Sie sich HTML-Code ansehen, können Sie verstehen, dass die Beschreibung und alle Datumsangaben in einer ID mit dem Namen "selectAll" vorhanden sind. Dieser "selectAll" wird geklont und seine ID wird geändert. Lassen Sie es mich wissen, wenn Sie weitere Informationen benötigen. – WeAreRight

Sie sollten einfach kopieren und meinen Code einfügen lesen.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     jQuery('#datetimepicker').datepicker(); 
    }) 
</script> 

<input id="datetimepicker" type="text">

Quelle

2017-01-31 04:15:24

Dies funktioniert ich weiß, aber die Antwort sollte über Frage sein. – WeAreRight

bootstrap datepicker funktioniert nicht, wenn es geklont wird

Antwort

Verwandte Themen