Check out this code snippet for a datepicker component:
<template>
<div class="datepicker">
<div class="month-header">
<i class="prev-month" @click="prevMonth"></i>
{{ currentMonth }} {{ currentYear }}
<i class="next-month" @click="nextMonth"></i>
</div>
<div class="weekdays">
<div class="weekday" v-for="weekday in weekdays" :key="weekday">
{{ weekday }}
</div>
</div>
<div class="days">
<div
v-for="date in daysInMonth(
currentYear,
currentMonthInNumber,
firstDay,
lastDay
)"
:key="date"
class="day"
:class="{
active: date === firstDay || date === lastDay,
between: between.includes(date),
}"
@click="chooseDate(date)"
>
{{ date }}
</div>
</div>
{{ between }}
</div>
</template>
<script>
export default {
data() {
return {
weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
months: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
currentMonth: "",
currentMonthInNumber: "",
currentYear: "",
firstDay: false,
between: [],
lastDay: false,
};
},
mounted() {
const date = new Date();
this.currentMonth = this.months[date.getMonth()];
this.currentMonthInNumber = date.getMonth();
this.currentYear = date.getFullYear();
},
methods: {
prevMonth() {
this.currentMonthInNumber--;
if (this.currentMonthInNumber < 0) {
this.currentMonthInNumber = 11;
this.currentYear--;
}
this.currentMonth = this.months[this.currentMonthInNumber];
},
nextMonth() {
this.currentMonthInNumber++;
if (this.currentMonthInNumber > 11) {
this.currentMonthInNumber = 0;
this.currentYear++;
}
this.currentMonth = this.months[this.currentMonthInNumber];
},
daysInMonth(year, month, firstDay, lastDay) {
let date = new Date(year, month, 1);
let days = [];
while (date.getMonth() === month) {
days.push(date.getDate());
date.setDate(date.getDate() + 1);
}
return days;
},
chooseDate(date) {
if (this.firstDay === false) {
this.firstDay = date;
} else if (this.lastDay === false) {
this.lastDay = date;
this.setBetween();
} else {
this.firstDay = date;
this.lastDay = false;
this.between = [];
}
},
setBetween() {
if (this.firstDay > this.lastDay) {
[this.firstDay, this.lastDay] = [this.lastDay, this.firstDay];
}
let date = new Date(
this.currentYear,
this.currentMonthInNumber,
this.firstDay
);
while (date.getDate() <= this.lastDay) {
this.between.push(date.getDate());
date.setDate(date.getDate() + 1);
}
},
},
};
</script>
<style scoped>
.datepicker {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}
.month-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.prev-month,
.next-month {
cursor: pointer;
}
.weekdays {
display: flex;
}
.weekday {
flex: 1;
font-weight: bold;
padding: 10px 0;
}
.days {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 10px;
margin-top: 20px;
}
.day {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
user-select: none;
}
.day.active {
background-color: #3c8dbc;
color: #fff;
}
.day.between {
background-color: #ddd;
}
</style>