Javascript 在vue单文件组件中使用vue引导datetimepicker_Javascript_Vue.js

Javascript 在vue单文件组件中使用vue引导datetimepicker

javascript vue.js

Javascript 在vue单文件组件中使用vue引导datetimepicker,javascript,vue.js,Javascript,Vue.js,我有一个Vue.js应用程序。我的应用程序主要由单个文件组件组成。我正在尝试在我的一个组件中使用vue引导datetimepicker 此时，我的应用程序正在运行。单击日期字段时，将显示当前日期。但是，我从未看到弹出式日历。我在Chrome控制台窗口中也没有看到任何错误。我不明白这为什么不起作用。目前，我有以下几点： page.vue <template> <div> <date-picker v-model="myDate" :config

我有一个Vue.js应用程序。我的应用程序主要由单个文件组件组成。我正在尝试在我的一个组件中使用

vue引导datetimepicker

此时，我的应用程序正在运行。单击日期字段时，将显示当前日期。但是，我从未看到弹出式日历。我在Chrome控制台窗口中也没有看到任何错误。我不明白这为什么不起作用。目前，我有以下几点：

page.vue

<template>
    <div>
        <date-picker v-model="myDate" :config="myDateConfig"></date-picker>
        <br />
    </div>
</template>

<script>
    import datePicker from 'vue-bootstrap-datetimepicker';

    export default {
        components: {
            datePicker
        },

        data: function() {
            return {
                myDate: null,
                myDateConfig: {
                    format: 'MM/DD/YYYY',
                    useCurrent: true,
                    showClear: true,
                    showClose: true
                },
        }
    }
</script>

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>DatePicker</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>    

  <body>
    <div id="app">      
      <router-view></router-view>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

    <script type="text/javascript" src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>


日期选择器

为什么当我在

日期选择器中单击时弹出的日历不显示？其他浏览器可以吗，例如：Firefox？不可以。它在Firefox中不工作。控制台中有日志吗？
<!doctype html>
<html lang="en">
  <head>
    <title>DatePicker</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>    

  <body>
    <div id="app">      
      <router-view></router-view>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

    <script type="text/javascript" src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>