DateComponent.vue

<template>
    <div>
        <div class="datepicker-trigger">
            <input
                type="text"
                id="datepicker-trigger"
                @click="openDatePickerModal()"
                placeholder="Dates"
                :value="formatDates(dateOne, dateTwo)"
                :class="{active : isActive}"
            />
            <portal to="jobSearchFilters">
                <sweet-modal ref="DatePickerModal" modal-theme="dark">
                    <div class="p-3">
                        <div class="flex p-3 justify-between">
                            <button
                                id="clearDatePickerButton"
                                class="text-red p-3"
                                @click="triggerDatePicker()"
                            >Clear</button>
                            <button @click="closeDatePickerModal()" class="p-3 text-white">
                                <i class></i>
                            </button>
                        </div>
                        <div v-if="(dateOne.length || dateTwo.length) > 1" id="dateShowHolder">
                            <h6 class="dateShow mr-1">
                                {{dateOne | formatDate('MMM DD, YYYY')}}
                                <i
                                    v-if="(dateOne.length && dateTwo.length) > 1"
                                >-</i>
                            </h6>
                            <h6 class="dateShow">{{dateTwo | formatDate('MMM DD, YYYY')}}</h6>
                        </div>
                        <AirbnbStyleDatepicker
                            :trigger-element-id="'datepicker-trigger'"
                            :mode="'range'"
                            :fullscreen-mobile="true"
                            :date-one="dateOne"
                            :date-two="dateTwo"
                            @date-one-selected="val => { dateOne = val }"
                            @date-two-selected="val => { dateTwo = val }"
                        ></AirbnbStyleDatepicker>
                    </div>
                </sweet-modal>
            </portal>
        </div>
    </div>
</template>

<script>
import format from 'date-fns/format'
import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'
import moment from 'moment'
export default {
    data() {
        return {
            dateFormat: 'MM/DD/YYYY',
            dateOne: '',
            dateTwo: '',
            selectedDate1: '',
            selectedDate2: '',
        }
    },
    mounted() {},
    methods: {
        triggerDatePicker(e) {
            // this.isActive = false;
            this.dateOne = ''
            this.dateTwo = ''
            window.eventBus.$emit('filtered', [
                {
                    postedFrom: '',
                    postedTo: '',
                },
            ])
        },
        openDatePickerModal() {
            this.$refs.DatePickerModal.open()
        },
        closeDatePickerModal() {
            this.$refs.DatePickerModal.close()
        },
        formatDates(dateOne, dateTwo) {
            let startDate = moment(format(dateOne, this.dateFormat)).format(
                'MM/DD/YYYY'
            )
            let endDate = moment(format(dateTwo, this.dateFormat)).format(
                'MM/DD/YYYY'
            )
            window.eventBus.$emit('filtered', [
                {
                    postedFrom: startDate,
                    postedTo: endDate,
                },
            ])
        },
    },
    computed: {
        isActive() {
            return this.dateOne || this.dateTwo ? true : false
        },
    },
}
</script>

<style scoped>
#clearDatePickerButton {
    text-decoration: underline;
    position: fixed;
    top: 2vh;
    left: 2vw;
}
.active {
    background: palegreen;
}
</style>