Question

我有一个Vue.js应用程序。我的应用程序主要由单个文件组件组成。我尝试在我的某个组件中使用vue-bootstrap-datetimepicker component。

此时，我的应用运行了。单击日期字段时，将显示当前日期。但是，我从未看到弹出日历。我也没有在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>

app.js

import Vue from 'vue';
window.Vue = Vue;

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import moment from 'moment';
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';

const routes = [
  { path: '/', component:require('./page.vue').default }
];

const router = new VueRouter({ 
  routes:routes
});

const app = new Vue({ 
    router,
    el: '#app'
    data: {}
});

的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>

当我点击date-picker时，为什么弹出日历不显示？

在Vue单文件组件中使用vue-bootstrap-datetimepicker

0 个答案: