Vue.js DatePicker

Vue.js DatePicker control that is using Material Design theme

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js date range picker</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="app"></div>

mounted: function () {
                var self = this;
                $(self.$el)                    
                    .datepicker({ minDate: startDate, value: startDate }) // 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');
            }
        })

var app = new Vue({
            el: '#app',
            template: '#demo-template',

data: {
                value: startDate
            }
        })
    </script>
</body>
</html>

;