[Vuejs]-How to add custom script to vue component

by

0👍

if you want to use datepicker in vue, it’s best to wrap it into a component like so:

Vue.component('datepicker', {
    props: ['dateformat','defaultdate','minDate','maxDate'],
    template: '<input type="text" />',
    mounted: function() {
        var dateformat = this.dateformat;
        var defaultdate = this.defaultdate;
        $(this.$el).datepicker({
            minDate: this.minDate,
            maxDate: this.maxDate,
            dateFormat: dateformat,
            onClose: this.onClose,
            defaultDate: defaultdate
        });
    },
    methods: {
        onClose: function(date) {
            this.$emit('input', date);
        }
    }
});

Basically you make props for whatever settings you need, and the component can be used in any project.

usage:

 <datepicker v-model="input.date"></datepicker>

If you don’t require jquery datepicker, but another library is possible i would recommend: http://element.eleme.io/#/en-US/component/date-picker

Leave a comment