Date picker libraries don't work in F7

There is a nice library for picking dates called Picker.js

I have an input form (LABEL + INPUT) in item-form.html page which is routed in my-app.js

This is the

  • in input form in item-form.html page which I want the user be able to input the date with Picker.js library,`

Captdure.PNG884x665 40.8 KB

And in my-app.js I wrote this code:$$(document).on(‘page:init’, ‘.page[data-name=“item-form”]’, function (e) {
// Do something here when page with data-name=“about” attribute loaded and initialized
var pickerInline = app.picker.create({ });
var input = document.getElementById(’#box1’);
var picker = new Picker(input, {
container: document.querySelector(’.picker-container’),
format: ‘YYYY/MM/DD’,
});And this is the result

Capture.PNG1365x692 23.1 KB

But I want it to look like this, but how?

Capdture.PNG1366x694 14.2 KB

I tried using many other similar libraries (like AnyPicker and F7 own built in pick component) but all of them didn’t show and worked correctly at all

use f7 picker
it is much better than any other picker you will ever see

I tried F7 picker before, it also does not appear at all

and that is your reason to use an external plugin ?
seriously ?

read docs
and use kitchen-sink

I copied the code from the doc (Picker component doc page), both JS and HTML code, and pasted it to a page in my project, but it didn’t appear. What should I do?
I tried F7 and many picker libraries, they all work fine in a simple HTML document, but in an F7 app project they partially appear in the index page, but not at all in a routed F7 page.