在HTML页面上实现Framework7日历

Question

I'm trying to add framework7 calendar on HTML-page, but it doesn't show up. What can be the problem?

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

My js-code

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

Answer 1

The problem may be that the DOM is not ready yet, in particular the '#calendar-default' input element. You can check if that's the problem using this line just before you initialize the calendar:

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

If it prints 'null' than that's your problem.

The solution depends on your context. You can solve it by using Dom7 (part of Framework7) and listening to the DOMContentLoaded event:

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

If you're using it with custom elements or some sort of client side MV-* framework the initialization logic may need to go in some life-cycle-method (I'm using Aurelia and had this problem when tried to create a datepicker custom component ).