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

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

Answer 1

问题可能是DOM还没有准备好，特别是'#calendar-default'输入元素。您可以在初始化日历之前检查是否存在使用此行的问题：

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

如果它打印'null'而不是你的问题。

解决方案取决于您的背景。您可以使用Dom7（Framework7的一部分）并收听DOMContentLoaded事件来解决此问题：

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

如果你在custom elements或某种客户端MV- *框架中使用它，初始化逻辑可能需要进入一些生命周期方法（我正在使用Aurelia和尝试创建日期选择器custom component时遇到此问题。

在html页面上实现Framework7日历

1 个答案: