Внедрить календарь Framework7 на html-странице

Я пытаюсь добавить календарь framework7 на HTML-страницу, но он не отображается. В чем может быть проблема?

Мой 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',
});

javascript html jquery html-framework-7
person Вася Пупкин    schedule 11.10.2016    source источник
comment
во-первых, запятая после input: '#calendar-default', случайно не стоит?   -  person anima_incognita    schedule 11.10.2016
comment
Избавьтесь от этой запятой после input:'#calendar-default'   -  person Josan Iracheta    schedule 31.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

Проблема может заключаться в том, что модель DOM еще не готова, в частности элемент ввода #calendar-default. Вы можете проверить, не в этом ли проблема, используя эту строку непосредственно перед инициализацией календаря:

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

Если он печатает «ноль», то это ваша проблема.

Решение зависит от вашего контекста. Вы можете решить эту проблему, используя Dom7 (часть Framework7) и прослушивая DOMContentLoaded:

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

Если вы используете его с пользовательскими элементами или каким-либо среды MV-* на стороне клиента логика инициализации может потребоваться в каком-то методе жизненного цикла (я использую Aurelia и возникла эта проблема при попытке создать средство выбора даты пользовательский компонент).

person Alon Bar    schedule 31.05.2017