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):

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css">  

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
  </script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>  
</head>
<body>  
  <div id="app" class="container">
    <h3>Bootstrap Datetimepicker (eonosdan) Sample</h3>
    <hr/>
    <div class="row">
      <div class="col-md-4">
        <label>Select Date</label>    
        <vue-datetimepicker></vue-datetimepicker>
      </div>
    </div>
  </div>

  <template id="dttemplate"> 
      <div class='input-group date'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
          </span>
      </div>
  </template>  

  <script>
    Vue.component('vue-datetimepicker', {
      // The todo-item component now accepts a
      // "prop", which is like a custom attribute.
      // This prop is called todo.
      data: function () {
        return {
          value: ''
        }
      },
      template: '#dttemplate',
      mounted: function () {
        var vm = this
        var mycomp = $(this.$el).datetimepicker({})
        //mycomp.datetimepicker('date', this.initDate)
        mycomp.on('dp.change', function (e) {
          vm.value = e.date
          vm.$emit('change', vm.value)
        })
      }    
    });

    new Vue({
      el: '#app',
      data: {
      },
      methods: {
      }
    })
  </script>
</body>
</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).

vue init webpack-simple advanceddtapp
cd advanceddtapp
npm install

Install moment.

npm install moment --save

Install eonosdan-bootstrap-datetimepicker

npm i eonasdan-bootstrap-datetimepicker --save

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

vue-datetimepicker.vue
<template>
    <div class='input-group date'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</template>

<script>
var $ = window.jQuery = require('jquery')
import moment from 'moment'
import eonosdandatetimepicker from 'eonasdan-bootstrap-datetimepicker'

export default {
  name: 'vue-datetimepicker',
  data () {
    return {
      value: ''
    }
  },
  watch: {
    options: function (options) {
      // update options
      $(this.$el).datetimepicker({ data: options })
    }
  },
  mounted: function () {
    var vm = this
    var mycomp = $(this.$el).datetimepicker({})
    mycomp.on('dp.change', function (e) {
      vm.value = e.date
      vm.$emit('change', vm.value)
    })
  },
  destroyed: function () {
    $(this.$el).off().datetimepicker('destroy')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Import this component in App.vue:

App.vue
<template>
  <div id="app" class="container">
    <h3>Bootstrap Datetimepicker (eonosdan) Sample</h3>
    <hr/>
    <div class="row">
      <div class="col-md-4">
        <label>Select Date</label>    
        <vue-datetimepicker></vue-datetimepicker>
      </div>
    </div>
  </div>
</template>

<script>
import vuedatetimepicker from './vue-datetimepicker.vue'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    'vue-datetimepicker': vuedatetimepicker
  }  
}
</script>

<style>

</style>

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

Index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>advanceddtapp</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css">      
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

Our application is ready. Now run it:

npm run dev

We can see our datetimepicker. It works 🙂

 

 

 

 

 

 

 

1 thought on “Using Bootstrap Datetimepicker (eonasdan) with Vue.js 2”

Yorum bırakın

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

Scroll to Top