Framework7点击日期输入框无法唤起Calendar日期选择器问题求助

问题根因 #

你在app.js中初始化Calendar实例的时机错误：全局App初始化完成时，首页home.f7还未渲染到DOM树中，#calendarinput元素不存在，导致Calendar实例没有绑定到对应的输入框上，点击自然无法唤起弹窗。

解决步骤 #

1. 先删除app.js末尾的这段Calendar初始化代码：

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

2. 修改home.f7的script部分，在页面初始化完成的生命周期回调中创建Calendar实例：

<script>
export default (props, { $f7, $on }) => {
  // 监听当前页面初始化完成事件，此时页面元素已加载完成
  $on('pageInit', () => {
    $f7.calendar.create({
      inputEl: "#calendarinput"
    })
  })
  return $render;
}
</script>

修改完成后重启开发服务即可正常唤起日历弹窗。

内容的提问来源于stack exchange，提问作者kanr