This example will help you to integrate Vue.js Bootstrap Datepicker with your Vue.js app.
Datepicker is a very crucial element for a modern web application.
So, it’s very important to choose a datepicker carefully while starting a development for your application. Because once it’s installed, it will be used throughout the app.
Therefore, you should choose a responsive and compatible datepicker for your app. That’s why I thought let me share an example on bootstrap datepicker with Vue.js that will surely work for you.
So, let’s get started to implement a simple Vue.js bootstrap datepicker example.
1. Install Vue.js app
Note: You can skip this step, if you already have app installed and ready.
First of all, create a simple Vue.js app.
[js]
vue init webpack vue-bootstrap-datepicker
[/js]
Next, let’s go to the project and install the dependencies.
[js]
cd vue-bootstrap-datepicker
npm install
[/js]
Now, you’re ready to use your app.
2. Install and Use Vue.js Bootstrap Datepicker
First of all, let’s install bootstrap datepicker in your Vue.js app.
# npm
[js]
npm install vue-bootstrap-datetimepicker –save
[/js]
OR # Yarn
[js]
yarn add vue-bootstrap-datetimepicker
[/js]
Once installed, let’s import the datepicker and necessary CSS in your main.js to make sure that we configure the datepicker in a way to use it throughout the app by putting just a few lines of code.
[js]
// Import this component
import datePicker from ‘vue-bootstrap-datetimepicker’
// Import required dependencies
import ‘bootstrap/dist/css/bootstrap.css’
import ‘eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css’
[/js]
Next, let’s call the component globally in main.js.
[js]
Vue.component(‘datePicker’, datePicker)
[/js]
That’s it! now you can use datepicker component in any component of your Vue.js app.
[html]
[/html]
Moreover, here is a full code with Vue.js bootstrap datepicker example.
[codegroup]
[js tab=”main.js”]
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
// Import datePicker component
import datePicker from ‘vue-bootstrap-datetimepicker’
// Import required dependencies
import ‘bootstrap/dist/css/bootstrap.css’
import ‘eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css’
Vue.config.productionTip = false
Vue.component(‘datePicker’, datePicker)
new Vue({
el: ‘#app’,
router,
template: ‘
components: { App }
})
[/js]
[html tab=”App.vue”]
{{date}}
[/html]
[/codegroup]
It’s simple, Right?
Finally, run your app using following command.
[js]
npm run dev
[/js]
And open your app at https://www.thetechieshouse.com:8080 in your browser window.
It’s the easiest way use Vue.js bootstrap datepicker with your Vue.js app and make it global to use it throughout your app.
Suggested: How To Use Bootstrap 4 With Vue.js [Alerts, Buttons, etc]
Furthermore, if you’re looking to try some more options for your datepicker, you can visit bootstrap datepicker Github repository and datepicker options.