VueJS Date Range

Question

I have to select two dates to set input date range. I have used this library but not date range input, have used single datepicker for each dates (Start Date and End Date) as requirement is to display only one calendar at a time. I have used vuejs in my project. So I have to bind those input values to the model. I'm new in vuejs so don't know very much about vuejs. But I come to know that I have to use custom vuejs directive to bind those values to model. Here are requirements of date range inputs.

One datepicker at a time.
Dynamic min max date to fullfill some validations like start<=end
Bind selected value to the modal (twoWay)
Different date format for modal and display value (if possible)

I have already spent 25 hrs on this and got too much frustrated. So If anyone knows the answer, it will be appreciated.

Here is my code.

HTML

<div id="app">
    <div class="dropdown-menu">
        <div class="input-group date">
            <label>from:</label>
            <input size="16" type="text" v-date v-model="queries.start_date" class="form_datetime" readonly="">
            <span class="input-group-addon">
                <span class="calendar-icon"></span>
            </span>
        </div>
        <div class="input-group date form_datetime">
            <label>to:</label>
            <input size="16" type="text" v-date v-model="queries.end_date" class="form_datetime" readonly>
            <span class="input-group-addon">
                <span class="calendar-icon"></span>
            </span>
        </div>
    </div>
</div>

js

Vue.directive('date', {
    twoWay: true,
    bind: function (el) {
        $(el).datetimepicker({
            format: "mm/dd/yyyy",
            autoclose: true,
            minView: 2,
            daysShort: true
        });
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        queries: {
            start_date: "",
            end_date: "",
        }
    },
    methods: {
        testVal: function () {
            console.log([this.queries.start_date, this.queries.end_date]);
        }
    }
});

Here is link for content.

EDIT I have linked wrong library. I have updated library which I have used. Please check updated link.

score 0 · Accepted Answer · edited Jul 16 '22 at 05:02

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: "",
        }
    },
});

VueJS Date Range

1 Answers1