Vue Js Date Range Picker: Vue.js date range picker is a customizable user interface component that allows users to select a range of dates. It provides a simple and intuitive way for users to choose start and end dates with various formatting options. Vue.js date range picker can be easily integrated into Vue.js projects using the v-model directive to bind selected date range values to a data object. The component is also highly configurable, allowing developers to customize various aspects such as the date format, range limits, and styling options. Overall, Vue.js date range picker is a useful tool for building interactive web applications with date range selection requirements.
How to integrate Vue Js Date Range Picker?
This code creates a date range picker component using Vue.js. It allows the user to select a start and end date, and displays the selected range in a formatted way. The component also ensures that the start date is always earlier than the end date. The code uses Vue.js data binding and methods to update the component’s state and behavior.
Vue Js Date Range Selector Example
<div class="date-range-picker-container">
<div class="date-range-picker">
<label class="label">From:</label>
<input class="input" type="date" v-model="startDate" @change="updateDateRange">
<label class="label">To:</label>
<input class="input" type="date" v-model="endDate" @change="updateDateRange">
</div>
<div class="selected-dates" v-if="startDate || endDate">
<span class="start-date" v-if="startDate">{{ formattedStartDate }}</span>
<span v-if="startDate && endDate"> - </span>
<span class="end-date" v-if="endDate">{{ formattedEndDate }}</span>
</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
startDate: new Date(),
endDate: new Date()
};
},
computed: {
formattedStartDate() {
return this.startDate ? this.formatDate(this.startDate) : '';
},
formattedEndDate() {
return this.endDate ? this.formatDate(this.endDate) : '';
}
},
methods: {
formatDate(dateString) {
const date = new Date(dateString);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${day.toString().padStart(2, '0')}-${month.toString().padStart(2, '0')}-${year}`;
},
updateDateRange() {
if (this.startDate && this.endDate && new Date(this.startDate) > new Date(this.endDate)) {
[this.startDate, this.endDate] = [this.endDate, this.startDate];
}
}
}
})
</script>
Output of Vue Js Date Range Picker
