[Vuejs]-Vue.js reuse of 3d.js

by

0👍

Here is an example of JQuery date picker wrapped in vue component. This way you created reusable component where you can use ‘props’ for passing values from rest of vue project. Same thing you can do for bubble chart. This is the easiest implementation for your needs.

 <template>
    <input class="datepicker-input btn-gray-gredient" type="text" readonly/>
</template>
<script>

    export default {
        props: ['value'],
        mounted: function () {
            /**
             * Getting today's date
             */
            var today = new Date();
            today.setHours(0, 0, 0, 0);
            today = ((today.getDate() < 10) ? ('0' + today.getDate()) : today.getDate()) + '-' + ((today.getMonth() + 1) < 10 ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1)) + '-' + today.getFullYear();
            /**
             * JQuery wrapped date picker
             */
            var self = this;
            $('.datepicker-input').on('click', function() {
                $('.fa-calendar').click();
            });

            /**
             * Setting up datepicker with default properties
             */
            $(self.$el)
                .datepicker({ value: today, iconsLibrary: 'fontawesome', format: 'dd-mm-yyyy' }) // init datepicker
                .trigger('change')
                .on('change', function () { // emit event on change.
                    self.$emit('input', this.value);
                });
        },
        watch: {
            value: function (value) {
                $(this.$el).val(value);
            }
        },
        destroyed: function () {
            $(this.$el).datepicker('destroy');
        }
    }
</script>

Leave a comment