我正在开发Vue 3和Bootstrap 5应用程序。
需要一个与Bootstrap兼容的日期选择器，我选择引导日期选择器。我通过纱线安装了它。
在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')
在componentsUiDatepickerFrom.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
我的错在哪里
问题
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链接，如本例Viteindex.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>
演示
虽然可以在Vue中使用此库，但我建议切换到不依赖jQuery的现代日期选择器库。jQuery操纵DOM，这应该避免，因为Vue管理自己的虚拟DOM，所以在混合两者时可能会出现潜在的错误。
input标记照原样使用只会为您提供本机HTML中可用的属性。将datepicker类添加到输入中只会为输入设置样式，但不会为inputHTML标记添加任何属性。
而不是使用b-form-datepicker。这是bootstrap为Vue.js提供的日期选择器标记。
代码如下，
<b-form-datepicker v-model="dateValue"></b-form-datepicker>
在文件的脚本部分中声明dateValue
有关更多信息，请参阅：表单日期选择器|组件|BootstrapVue