Using Bootstrap Datetimepicker (eonasdan) with Vue.js 2

Datetimepicker (eonasdan) is really a useful plugin. It has a nice bootstrap interface. Users can select easily date and time using this plugin.

In my vue.js web projects, I needed such a component. There is one, but unfortunately, it does not work with vue.js version 2.

So, I will explain how to use this plugin in a vue.js 2 environment.

There is a sample in vue.js guide. Wrapping a jquery plugin. We will use the same strategy to use this plugin in our application.

Create a file (index.html):

It includes all the dependencies from cdn (script src=).

Using In A Webpack Vue.js Project

Using in a more complex environment, for example in a project generated with webpack , hot reloading features, is also easy.

Create a project with vue-cli (advanceddtapp).

Install moment.

Install eonosdan-bootstrap-datetimepicker

Create a component file in src folder: vue-datetimepicker.vue

vue-datetimepicker.vue

Import this component in App.vue:

App.vue

Lastly import bootstrap.css and bootstrap-datetimepicker.css files in index.html. We are including this files from cdn.

Index.html

Our application is ready. Now run it:

We can see our datetimepicker. It works 🙂

 

 

 

 

 

 

 

1 düşünce - “Using Bootstrap Datetimepicker (eonasdan) with Vue.js 2”

Yorum Gönder

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top