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.
vue init webpack vue-bootstrap-datepicker
Next, let’s go to the project and install the dependencies.
cd vue-bootstrap-datepicker npm install
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
npm install vue-bootstrap-datetimepicker --save
OR # Yarn
yarn add vue-bootstrap-datetimepicker
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.
// 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'
Next, let’s call the component globally in main.js.
Vue.component('datePicker', datePicker)
That’s it! now you can use datepicker component in any component of your Vue.js app.
<date-picker v-model="date" :config="config"></date-picker>
Moreover, here is a full code with Vue.js bootstrap datepicker example.
// 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: '<App/>', components: { App } })
<template> <div id="app"> <div class="container"> <div class="row"> <div class="col-md-12"> <date-picker v-model="date" :config="config"></date-picker> {{date}} </div> </div> </div> </div> </template> <script> export default { name: 'app', data () { return { date: new Date(), config: { format: 'DD/MM/YYYY', useCurrent: false, } } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
It’s simple, Right?
Finally, run your app using following command.
npm run dev
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.
Leave a Reply