vuejs2.0 can not use this component

[lenvonsam]

@Haixing-Hu hello, when i update vuejs to 2.0 can not use this component, how can i fix this problem?

[IvanBernatovic]

Considering there are so many issues without answers I think that project is abandoned. You have 3 options:

1. Use VueJS 1
2. Refactor package to work with Vuejs 2 and submit pull request
3. Use original bootstrapdatetimepicker with jQuery

[valeriob]

@Haixing-Hu do you have any progress on this ? 😄

[DoDSoftware]

I was able to make vue2 work with datetimepicker like this:

<div class="datepicker">
<span class="datepicker-icon">
<i class="fa fa-calendar fa-fw"></i>
</span>
<input class="datepicker-input form-control" type="text" :id="dtp" :value="value" v-model="value" v-on:keyup,change="emitValue()">
</div>
</template>

<script>
export default {
  name : 'dt-picker',
  props : {
     id: {
        type: String,
        default: 'dtp'
      },
      value: {
        type: String,
        default : ''
      },
      step: {
        type: Number,
        default : 5
      },
      'defaultTime': {
        type: Date,
        default : null
      },
      'formatDate': {
        type: String,
        default : 'Y-m-d'
      },
      'format': {
        type: String,
        default : 'Y-m-d H:i'
      },
      'formatTime': {
        type: String,
        default : 'H:i'
      },
      'timepicker': {
        type: Boolean,
        default : true
      },
      'datepicker': {
        type: Boolean,
        default : true
      },
      'defaultDate': {
        type: String,
        default : ''
      }

  },
  methods: {
    emitValue (event) {
                   this.$emit('input', $(event.currentTarget).val());
    }
  },
  watch: {
            value: {
                handler: function (val, oldVal) {
                   this.$emit('input', val);
                }
                , deep: true},
  },
  mounted () {

        var _this=this;
        console.log(jQuery.datetimepicker);
        //jQuery.datetimepicker.setLocale('de');
        var options = {
            step: _this.step,
            format: _this.format,
            defaultTime: _this.defaultTime || moment().tz('America/New_York').format('H:m'),
            defaultDate: _this.defaultDate,
            formatDate: _this.formatDate,
            formatTime: _this.formatTime,
            timepicker: _this.timepicker,
            datepicker: _this.datepicker,
            defaultDate: _this.defaultDate,
            onClose: function(currentTime, element){
                _this.value = $(element).val();
                _this.$emit('input', _this.value);
            }
        };
        console.log(options);
        $(this.$el).children('input').first().datetimepicker(options);
        $(this.$el).children('input').on('change',function(){
                _this.$emit('input', _this.value);
        });
},
  destroyed () {

  }
}
</script>`




**Then registering the component like:**

Vue.component('dt-picker', require('./components/DTPicker.vue'));

And finally using it like this:

`<tiny-mce  v-model="request.description"
                                      :toolbar="'insertfile undo redo | styleselect | forecolor backcolor sizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | hr'"
                                      :menubar="'file edit insert view format table tools'"
                                      :other-props="tinymce_config"
                            ></tiny-mce>`

[brandonn1231]

@DelightedD0D Could you help walk me through how you did this? I'm trying to get this datetime picker to work with vue 2 as well. I followed the instructions in the original readme for this, and then I created another component with the code you provided. I then registered it in my main.js and tried implementing it in another component, but its not working (its saying the "moment().tz" in mounted() is not a function. When I removed it, it then said the $(...).children(...).first(...).datetimepicker is not a function). When I removed that, all I was left with was an input field that didn't do anything >.<

These are the dependencies that I'm using, and I have jquery loaded via a script tag in my index.html

"dependencies": {
"bootstrap": "^3.3.7",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-vue": "^0.10.0-alpha.1",
"eonasdan-bootstrap-datetimepicker": "^4.17.37",
"font-awesome": "^4.2.0",
"moment": "^2.9.0",
"moment-timezone": "^0.4.0",
"timezone": "^1.0.6",
"vue": "2.1.0",
"vue-datetime-picker": "^0.2.1",
"vue-flatpickr": "^2.3.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.26.1",
"file-loader": "^0.9.0",
"vue-loader": "^10.0.0",
"vue-template-compiler": "2.1.0",
"vuikit": "^0.6.2",
"webpack": "^2.2.0-rc.2",
"webpack-dev-server": "^2.2.0-rc.0"
}

Thank you so much for the help!

[DoDSoftware]

@brandonn1231

Sure, I'll try to explain how I got mine working:

First, Im using Laravel and Gulp so some things may be different for you.
Also, **I needed the call to moment in mounted. because I wanted to force a specific timezone, you may not need that **

Step 1, ignore this repo and all of its steps

Step 2, download the jquery.datetimepicker files from:

• https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.3/build/jquery.datetimepicker.full.js
• https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css

Step 3, download the moment.js files from:

• https://momentjs.com/downloads/moment.min.js
• https://momentjs.com/downloads/moment-timezone-with-data.js

Step 4 In my gulpfile.js, I added the paths to the files in my project:

const elixir = require('laravel-elixir'); 
require('laravel-elixir-vue-2');

// relative to  /resources/assets/css/
var styles = [
    //....
    'lib/jquery.datetimepicker.min.css', 
   // ....
];
// relative to  /resources/assets/js/
var scripts = [
    // ....
    'lib/moment.min.js',
    'lib/moment-timezone-with-data.js', 
    'lib/jquery.datetimepicker.full.js',
    // ....
];
// relative to  /resources/assets/sass/
var sass = [
    'app.scss'
];

// relative to  /resources/assets/js/
var webpacks = ['app.js']; // app.js includes jquery, bootstrap, etc...


elixir(function(mix) {
    mix.webpack(webpacks,'public/js/app.js')
        .styles(styles)
        .scripts(scripts)
        .sass(sass);
});

Step 5 I created a file named DTPicker.vue with the following content:

<template>
<div class="datepicker">
<span class="datepicker-icon">
<i class="fa fa-calendar fa-fw"></i>
</span>
<input class="datepicker-input form-control" type="text" :id="dtp" :value="value" v-model="value" v-on:keyup,change="emitValue()">
</div>
</template>

<script>
export default {
  name : 'dt-picker',
  props : {
     id: {
        type: String,
        default: 'dtp'
      },
      value: {
        type: String,
        default : ''
      },
      step: {
        type: Number,
        default : 5
      },
      'defaultTime': {
        type: Date,
        default : null
      },
      'formatDate': {
        type: String,
        default : 'Y-m-d'
      },
      'format': {
        type: String,
        default : 'Y-m-d H:i'
      },
      'formatTime': {
        type: String,
        default : 'H:i'
      },
      'timepicker': {
        type: Boolean,
        default : true
      },
      'datepicker': {
        type: Boolean,
        default : true
      },
      'defaultDate': {
        type: String,
        default : ''
      }

  },
  methods: {
    emitValue (event) {
        this.$emit('input', $(event.currentTarget).val());
    }
  },
  watch: {
     value: {
       handler: function (val, oldVal) {
            this.$emit('input', val);
       }
     , deep: true},
  },
  mounted () {

        var _this=this;
        console.log(jQuery.datetimepicker);
        //jQuery.datetimepicker.setLocale('de');
        var options = {
            step: _this.step,
            format: _this.format,
            defaultTime: _this.defaultTime || moment().tz('America/New_York').format('H:m'),
            defaultDate: _this.defaultDate,
            formatDate: _this.formatDate,
            formatTime: _this.formatTime,
            timepicker: _this.timepicker,
            datepicker: _this.datepicker,
            defaultDate: _this.defaultDate,
            onClose: function(currentTime, element){
                _this.value = $(element).val();
                _this.$emit('input', _this.value);
            }
        };
        console.log(options);
        $(this.$el).children('input').first().datetimepicker(options);
        $(this.$el).children('input').on('change',function(){
                _this.$emit('input', _this.value);
        });
},
  destroyed () {

  }
}
</script>

Step 6 In my app.js I added the following to register the component

Vue.component('dt-picker', require('./components/DTPicker.vue'));

Step 7 I ran the following command in my terminal to compile all of those into all.js and all.css

gulp

Step 8 I made a file named submit.js with the following content:

var notifySubmit = new Vue({
    el: '#submit-page',
    methods: { 
    },
    watch: {
    },
    mounted: function() { 
    },
    data: { 
        annotations:{
            start:{
                date:'', 
            },
            end: {
                date: '',
            }
        }
    } 
});               
       

Step 9 In my .blade template (HTML view) I added:

<div id="submit-page">
     <dt-picker v-model="annotations.start.date" :step="1"></dt-picker>
</div>
<script type="text/javascript" src="{{ URL::asset('js/submit.js') }}"></script>       

I think that covers everything but let me know if you have any issues

[shanecp]

@DelightedD0D

The last code works, but it's outdated now, because the latest version of datetime picker has renamed some of the original options and events. Also dtp needs to be added to the data function.

http://eonasdan.github.io/bootstrap-datetimepicker/Changelog/