无法让日历日期选择器弹出 - Framework7

Question

我第一次使用 HTML、Javascript 和 Framework7 制作一个小应用程序。 我已经安装了framework7并制作了基本启动器的目录和安装 空白项目的文件模板...当前使用“npm start”服务器，它返回浏览器上的默认主页内容。所以没关系...

现在我只想让“日历/日期选择器”正常工作。我已经得到要显示的日期字段。但是当我尝试单击它并显示日历时，就像在 Framework7 文档 https://v3.framework7.io/docs/calendar.html 中所做的那样， 什么都没有出现。我现在按照指南的要求尝试了多次，但没有任何反应。我还需要什么额外的东西吗？

感谢您的建议。

我在下面包含了部分代码：

app.js：

import $ from 'dom7'; import Framework7 from 'framework7/bundle';

// Import F7 Styles
import 'framework7/framework7-bundle.css';

// Import Icons and App Custom Styles
import '../css/icons.css'; import '../css/app.css';


// Import Routes
import routes from './routes.js';
// Import Store
import store from './store.js';

// Import main app component
import App from '../app.f7';


var app = new Framework7({
  name: 'WeatherStationDat', // App name
  theme: 'auto', // Automatic theme detection
  el: '#app', // App root element
  component: App, // App main component

  // App store
  store: store,
  // App routes
  routes: routes,
});


//HERE
var calendar = app.calendar.create({
    inputEl: "#calendarinput"
});

home.f7：

<template>
  <div class="page" data-name="home">
    <!-- Top Navbar -->
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link icon-only panel-open" data-panel="left">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title sliding">WeatherStationDat</div>
        <div class="right">
          <a href="#" class="link icon-only panel-open" data-panel="right">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title-large">
          <div class="title-large-text">WeatherStationDat</div>
        </div>
      </div>
    </div>
    <!-- Toolbar-->
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#" class="link">Left Link</a>
        <a href="#" class="link">Right Link</a>
      </div>
    </div>
    
    
    <!-- Scrollable page content-->
    <div class="page-content">
    
      <div class="block block-strong">
        <p>Here is your blank Framework7 app. Let's see what we have here.</p>
      </div>
    
      <div class="block block-strong">
      
        <p>enter date</p>
      
        <div class="list no-hairlines-md">
            <ul>
                <li>
                <div class="item-content item-input">
                    <div class="item-inner">
                    <div class="item-input-wrap">

                        <!-- HERE -->
                        <input type="text" placeholder="Your birth date" readonly="readonly" id="calendarinput"/>


                    </div>
                    </div>
                </div>
                </li>
            </ul>
        </div>
        
      </div>
    </div>
    
  </div>
  
</template>
<script>
export default () => {
  return $render;
}
</script>

Answer 1

好的，我想出了一个让它工作的方法。了解如何在调试另一个字段时执行此操作。我曾假设因为 app.js 中存在“var app = new Framework7”代码，所以这就是放置 calendar.create() 代码的地方。但实际上，当将该代码放入 home.f7 文件的部分，在“export default”和“on pageInit”内时， 日历弹出。

注意，此文件中使用的是 $f7.calendar.create()，而不是 app.calendar.create()。实际上有一份文档显示已完成，但我之前错过了。

这里使用的是home.f7文件；我尝试将以下脚本代码放入 app.js 但是日历字段没有响应。

这是 home.f7 页面内容部分的 HTTP：

 <!--CALENDAR-->
      <div class="block block-strong">
      
        <p>ENTER DATE</p>
      
        <div class="list no-hairlines-md">
            <ul>
                <li>
                <div class="item-content item-input">
                    <div class="item-inner">
                    <div class="item-input-wrap">
                        <input type="text" placeholder="Enter date of record" readonly="readonly" id="calendarinput"/>
                    </div>
                    </div>
                </div>
                </li>
            </ul>
        </div>
      </div>

文件末尾有一段，这段代码在里面：

<script>

export default (props, { $, $f7, $on }) => {

    $on('pageInit', () => {

        let calendarDefault;
        
        calendarDefault = $f7.calendar.create({
            inputEl: '#calendarinput',
        });
        
        
    })
    
    return $render;
}

</script>