[Vuejs]-VueJS Date Range

by

0👍

✅

I got solution. I have to use component. I have read somewhere that you can not get instance of custom directive in VueJS2. I don’t know it is correct or not. But got my solution from this reference.

HTML

<div class="dropdown-menu" id="app">
    <div class="input-group date">
        <label>from:</label>
        <datepicker v-model="queries.start_date" :enddate="queries.end_date"></datepicker>
        <span class="input-group-addon">
            <span class="calendar-icon"></span>
        </span>
    </div>
    <div class="input-group date form_datetime">
        <label>to:</label>
        <datepicker v-model="queries.end_date" :startdate="queries.start_date"></datepicker>
        <span class="input-group-addon">
            <span class="calendar-icon"></span>
        </span>
    </div>
</div>

<script type="text/x-template" id="datepicker-template">
    <input size="16" type="text" class="form_datetime" readonly="">
</script>

JS

Vue.component('datepicker', {
    props: ['value', 'startdate', 'enddate'],
    template: '#datepicker-template',
    mounted: function () {
        var vm = this;
        $(this.$el)
                .val(this.value)
                .datetimepicker({
                    format: "mm/dd/yyyy",
                    autoclose: true,
                    minView: 2,
                    daysShort: true,
                    startDate: this.startdate,
                    endDate: this.enddate
                })
                .on('change', function () {
                    vm.$emit('input', this.value);
                });
    },
    watch: {
        value: function (value) {
            $(this.$el).val(value);
        },
        startdate: function (value) {
            $(this.$el).datetimepicker('setStartDate', value);
        },
        enddate: function (value) {
            $(this.$el).datetimepicker('setEndDate', value);
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        queries: {
            start_date: "",
            end_date: "",
        }
    },
});

Leave a comment