Implementieren Framework7 Kalender auf HTML-Seite

Question

Ich versuche, Framework7 Kalender auf HTML-Seite hinzufügen, aber es wird nicht angezeigt. Was kann das Problem sein?

Mein html-Code:

<div class="content-block-title">Default setup</div> 
    <div class="list-block"> 
     <ul> 
      <li> 
       <div class="item-content"> 
        <div class="item-inner"> 
         <div class="item-input"> 
          <input type="text" placeholder="Your birth date" readonly id="calendar-default" /> 
         </div> 
        </div> 
       </div> 
      </li> 
     </ul> 
    </div>   

Mein js-Code

var myApp = new Framework7(); 
var calendarDefault = myApp.calendar({ 
input: '#calendar-default', 
}); 

Answer 1

Das Problem kann sein, dass der DOM noch nicht fertig ist, insbesondere die '# Kalender-default' Eingabeelement . Sie können überprüfen, ob das ist das Problem dieser Zeile mit, kurz bevor Sie den Kalender zu initialisieren:

console.log(document.getElementById('calendar-default')); 

Wenn er druckt ‚null‘ als das ist Ihr Problem.

Die Lösung hängt von Ihrem Kontext ab. Sie können es lösen, indem Dom7 (Teil Framework7) mit und Hören der DOMContentLoaded Veranstaltung:

$$(document).on('DOMContentLoaded', function() { 
    var calendarDefault = myApp.calendar({ 
     input: '#calendar-default', 
    }); 
}); 

Wenn Sie es mit custom elements oder irgendeine Art von Client-Seite MV- mit * sind Rahmen der Initialisierung Logik müssen möglicherweise gehe in irgendeine Lebenszyklus-Methode (Ich benutze Aurelia und hatte dieses Problem, wenn versucht wurde, einen Datepicker custom component zu erstellen).