2017-10-04 4 views
0

Ich habe eine Seite, die neue HTML-Tabellenzeilen dynamisch einfügen wird.Wie initiiere ich ein Dattimepicker-Plugin für ein dynamisch erstelltes DOM-Element?

Jede Zeile in der Tabelle enthält 2 Eingänge (links und rechts). Jeweils zwei Eingänge müssen miteinander verbunden werden, um mit Bootstrap-datetimepicker einen Bereichsselektor zu bilden.

Ich habe eine Funktion erstellt, die das datetimepicker Plugin an jede Eingabe haken sollte, aber aus irgendeinem Grund funktioniert das nicht.

Diese Funktion wird jedes Mal ausgelöst, wenn dem DOM dynamisch eine neue Zeile hinzugefügt wird.

function initilizeRangePicker(index) { 

    var from = $('#NewMultipleEvent_' + index + '__StartsAt'); 
    var to = $('#NewMultipleEvent_' + index + '__EndsAt'); 

    from.datetimepicker({ 
     format: DateTimeFormat, 
     useCurrent: false 
    }); 

    to.datetimepicker({ 
     format: DateTimeFormat, 
     useCurrent: false 
    }); 

    from.on("dp.change", function (e) { 
     to.data("DateTimePicker").minDate(e.date); 
    }); 

    to.on("dp.change", function (e) { 
     from.data("DateTimePicker").maxDate(e.date); 
    }); 
} 

Ich habe auch versucht, diese Funktion auf die folgende

function initilizeRangePicker(index) { 

    var from = $('#NewMultipleEvent_' + index + '__StartsAt'); 
    var to = $('#NewMultipleEvent_' + index + '__EndsAt'); 

    $(document).on('datetimepicker', from, function (e) { 
     $(this).datetimepicker({ 
      format: DateTimeFormat, 
      useCurrent: false 
     }); 
    }); 

    $(document).on('datetimepicker', to, function (e) { 
     $(this).datetimepicker({ 
      format: DateTimeFormat, 
      useCurrent: false 
     }); 
    }); 


    from.on("dp.change", function (e) { 
     to.data("DateTimePicker").minDate(e.date); 
    }); 

    to.on("dp.change", function (e) { 
     from.data("DateTimePicker").maxDate(e.date); 
    }); 
} 

aber es funktioniert nicht. Die Elemente from und to sind vorhanden und werden korrekt hinzugefügt. Ich habe das auch validiert, indem ich Folgendes protokolliere: console.log(from.length, to.length);

Wie kann ich die Bereichsauswahl korrekt erstellen?

+1

Was ** der Wert ist darauf hingewiesen, Datetimeformat **? – gaetanoM

+1

Das Format ist MM/TT/JJJJ LT –

+1

Werfen Sie einen Blick auf diese [Geige] (https://jsfiddle.net/v17y9vj1/) und lassen Sie es mich wissen. – gaetanoM

Antwort

0

Es muss einen Fehler im Code, weil alles, was Arbeit als @gaetanoM bereits in Kommentar

function initilizeRangePicker(index) { 
 

 
    var from = $('#NewMultipleEvent_' + index + '__StartsAt'); 
 
    var to = $('#NewMultipleEvent_' + index + '__EndsAt'); 
 

 
    from.datetimepicker(); 
 
    to.datetimepicker(); 
 

 
    from.on("dp.change", function (e) { 
 
     to.data("DateTimePicker").minDate(e.date); 
 
    }); 
 

 
    to.on("dp.change", function (e) { 
 
     from.data("DateTimePicker").maxDate(e.date); 
 
    }); 
 
} 
 

 
function appendRow() { 
 
    var index = $('.row').length; 
 
\t var idFrg = 'NewMultipleEvent_' + index; 
 
    var row = $('<div class="row"></div>'); 
 
    ["__StartsAt", "__EndsAt"].forEach(function(side) { 
 
\t row.append('<div class="col-sm-6"><div class="form-group"><div class="input-group date" id="' + idFrg + side + '"><input type="text" class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div>'); 
 
    }); 
 
    $("#wrapper").append(row); 
 
    initilizeRangePicker(index) 
 
    
 
} 
 

 

 
$(document).ready(function() { 
 
\t initilizeRangePicker(0); 
 
});
body { 
 
    padding: 50px 15px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<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.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="container" id="wrapper"> 
 
    <div class="row"> 
 
     <div class='col-sm-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date' id='NewMultipleEvent_0__StartsAt'> 
 
        <input type='text' class="form-control" /> 
 
        <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class='col-sm-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date dpck' id='NewMultipleEvent_0__EndsAt'> 
 
        <input type='text' class="form-control" /> 
 
        <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<button type="button" class="btn btn-default" onclick="appendRow()">Append Datepicker</button>

+0

Sie sollten auf die Option des 'to' Picker' useCurrent: false' setzen, wie die Dokumentation sagt https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1075 –

Verwandte Themen