在HTML頁面上實現Framework7日曆

Question

我試圖在HTML頁面上添加framework7日曆，但不顯示。可能是什麼問題？

我的HTML代碼：

<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>   

我的js代碼

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

Answer 1

的問題可能是DOM還沒有準備好，特別是「＃日曆默認的」輸入元素。您可以檢查，如果這是使用這條線，你初始化日曆之前的問題：

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

如果打印「空」比是你的問題。

解決方案取決於您的上下文。您可以通過使用Dom7（Framework7的一部分）和聽DOMContentLoaded事件解決這個問題：如果你使用它與custom elements或某種客戶端MV-的

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

*框架的初始化邏輯可能需要去一些生命週期方法（我使用Aurelia，並試圖創建日期選擇器custom component時有此問題）。