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

Question

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

现在我只想让 'Calendar/Datepicker' 正常工作。我已经得到要显示的日期字段。但是当我尝试单击它并显示日历时，就像在 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

好的，我想出了一个让它工作的方法。在调试另一个字段时发现了如何做到这一点。我曾假设因为 'var app = new Framework7' 代码出现在 app.js 中，这就是放置 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>

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

cannot get the calendar datepicker to popup - Framework7

html

javascript

css

html-framework-7