是什么原因导致无法在 Vue 3 应用程序中引入 Bootstrap 日期选择器？

Question

我正在开发 Vue 3 和 Bootstrap 5 应用程序。

需要与Bootstrap兼容的日期选择器，我选择bootstrap-datepicker。我是通过 yarn 安装的。

在main.js中：

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.js'   
import { createApp } from 'vue'
import router from 'vue-router'
import VueAxios from 'vue-axios'
import axios from 'axios'
import App from './App.vue'

createApp(App)
              .use(router)
              .use(VueAxios, axios)
              .provide('$apiBaseUrl', 'http://apisource.com/api')
              .mount('#app')

在components\Ui\DatepickerFrom.vue中：

<template>
        <div class="input-group datepicker" id="date_from">
            <input type="text" class="form-control" />
            <span class="input-group-append">
                <span class="input-group-text icon d-block">
                    <i class="fa fa-calendar"></i>
                </span>
            </span>
        </div>
</template>

<script>
export default {
  name: 'DatepickerFrom',

  mounted() {
    document.getElementById('date_from').datepicker();
  }
}
</script>

更新

在 public/index.html 我在 </body> 之前添加：

<script src="<%= BASE_URL %>/node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="<%= BASE_URL %>/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script>
  (function(){
    $('#date_from').datepicker();
  })();
</script>

问题依然存在。

问题

尽管显然所有资源都可用，但 document.getElementById('date_from').datepicker() 行在控制台中抛出此错误：

Uncaught TypeError: document.getElementById(...).datepicker is not a function

我的错误在哪里？

Answer 1

input 标签将只为您提供原生 HTML 中可用的属性。将 datepicker class 添加到输入中只会设置您的输入样式，但不会为 input HTML 标签添加任何属性。

而不是使用 b-form-datepicker。这是 bootstrap 为 Vue.js.
提供的日期选择器标签代码如下，

<b-form-datepicker v-model="dateValue"></b-form-datepicker>

在文件的脚本部分声明 dateValue。

更多信息，请参考：Form Datepicker | Components | BootstrapVue

Answer 2

问题

bootstrap-datepicker 不会增加 document（或任何其他原生 API），因此以下代码将失败：

// ❌ The `.datepicker` function does not exist
document.getElementById('date_from').datepicker();

在您的第二次尝试中，尝试加载日期选择器的 <script> 块最有可能发生在之前 Vue 已将所需的模板呈现给 DOM ，因此找不到 #date_from 元素。

解决方案

bootstrap-datepicker 是一个 jQuery 扩展，它需要 jQuery 全局安装（在 window 上）到运行。确保在 index.html 中导入 Vue 应用程序之前包含 jquery 和 bootstrap-datepicker 的 CDN link，如本例所示查看 index.html:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
      integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.standalone.min.css"
      integrity="sha512-TQQ3J4WkE/rwojNFo6OJdyu6G8Xe9z8rMrlF9y7xpFbQfW5g8aSWcygCQ4vqRiJqFsDsE1T6MoAOMJkFXlrI9A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

使用该库的唯一方法是通过 jQuery 调用。您的组件应该在 mounted() 挂钩中使用 jQuery，并将模板引用而不是元素 ID 传递给容器元素，以便您可以在需要时在同一页面上拥有多个组件：

// DatepickerFrom.vue
<template>
  <div class="input-group datepicker" ref="datepicker">
    <input type="text" class="form-control" />
    <span class="input-group-append">
      <span class="input-group-text icon d-block">
        <i class="fa fa-calendar"></i>
      </span>
    </span>
  </div>
</template>

<script>
export default {
  mounted() {
    const $ = window.jQuery
    $(this.$refs.datepicker).datepicker()
  }
}
</script>

demo

虽然可以在 Vue 中使用此库，但我建议切换到不依赖于 jQuery 的现代 date-picker 库。 jQuery 操纵 DOM，这应该避免，因为 Vue 管理自己的虚拟 DOM，所以当混合两者时可能会出现潜在的错误。

是什么原因导致无法在 Vue 3 应用程序中引入 Bootstrap 日期选择器？

What causes this failure to introduce a Bootstrap date picker in a Vue 3 app?

javascript

bootstrap-datepicker

vue.js

vuejs3

更新

问题

我的错误在哪里？

问题

解决方案