Bootstrap-Datetime-Picker mit Vuejs 2 verwenden

Question

Ich wollte Datetime Picker mit Vue 2 oder Webpack integrieren. Ich habe versucht zu suchen, konnte aber keinen verwandten Artikel finden. Hat jemand den Datetime-Picker mit Vue2 oder Webpack integriert? Gibt es einen Beispielcode als Referenz? Jede Hilfe würde sehr geschätzt werden.

Danke.

Answer 1

Sie können sicher einige Probleme zu dem Thema nur durch googlen vuejs bootstrap datetimepicker finden, aber ehrlich gesagt bin ich nicht sicher, VueJS ist gut auf die Arbeit mit Bootstrap zugeschnitten, die bereits eine eigene (jQuery) Logik haben.

Es gibt das VueStrap Projekt, aber es funktioniert mit Vue1, siehe datepicker. This fork soll Vue2 unterstützen, aber ich kann seine Qualität nicht garantieren. Allerdings könnte es Ihnen eine Inspiration geben, wie Sie Ihren Datepicker integrieren können, wenn Sie es selbst machen wollen, siehe datepicker code.

Wenn Sie nichts dagegen haben, einen anderen picker verwenden, würde ich einige andere vorschlagen, die zu einem Projekt trivial zu integrieren:

• Bulma date(time)picker from vue-bulma → Demo

• Element datetimepicker → Github of the project

Answer 2

Hier werde ich den Code von bootstrap's 3 example verwenden. Sie haben eine Komponente für die Datumsauswahl zu erstellen:

Vue.component('datetimepicker', { 
    template: ` 
      <div class='input-group date' ref="datetimepicker"> 
       <input type='text' class="form-control" :value="value" @change="update($event)" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
    `, 
    props: ['value'], 
    methods: { 
     update(event){ 

      this.$emit('input', event.target.value); 
     } 
    }, 
    mounted(){ 
     $(this.$refs.datetimepicker).datetimepicker() 
    } 
}); 

Und jetzt können Sie diese Komponente wie folgt verwenden:

<datetimepicker v-model="myDate"></datetimepicker>