Working with Dates
Some web application will require working with dates and time. As such, you will need to use the JavaScript Date object or a JavaScript Library like Luxon. The following is a lis of examples of to dates and times could be intergrated with a Vue web application.
Using Luxon with Vue
Because Luxon is its own library, it will need to be included allow side the Vue framework. Once both are available they will be able to be used together. It is recommended that shortcut variables to Luxon objects be declared outside of the Vue applications instance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Calendar</title>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0/build/global/luxon.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
const DateTime = luxon.DateTime
const Info = luxon.Info
const app = Vue.createApp({})
const vm = app.mount('#app')
Month names
While it is prefectly acceptable to create your own array of month names, if you are using the Luxon library you can utilize the months() method found in the Info object.
It is important to note that while the months() method produces a standard array that starts with 0, the Luxon library will generally assigned 1 for the month of January. This will require an adjustment to the index as shown below.
const DateTime = luxon.DateTime
const Info = luxon.Info
const app = Vue.createApp({
data: function () {
return {
months: Info.months()
}
}
})
const vm = app.mount('#app')
<div id="app">
<select>
<option v-for="(month, index) in months"
:value="index + 1">{{ month }}</option>
</select>
</div>
Days of the week
While it perfectly acceptable to create your own array containing the days of the week. if you are using the Luxon library you can utilize the weekdays() method found in the Info object.
It is important to note that the Luxon weekdays() method will return the days of the week starting with Monday. To start with Sunday will require a small conversion.
const DateTime = luxon.DateTime
const Info = luxon.Info
const app = Vue.createApp({
data: function () {
return {
weekdays: Info.weekdays()
}
},
computed: {
startWithSunday: function () {
const weekdays = Info.weekdays()
weekdays.unshift(weekdays.pop())
return weekdays
}
}
})
const vm = app.mount('#app')
<div id="app">
<ul>
<li v-for="weekday in weekdays">
{{ weekday }}
</li>
</ul>
<ul>
<li v-for="weekday in startWithSunday">
{{ weekday }}
</li>
</ul>
</div>
Days in the month
Knowing how many days are in a month is crucial for making a calendar application, and since this number of the days will change depending month and year it can be difficult. Fortunately it is possible to get the days of the month from JavaScript Date Object and the Luxon library.
Using the Luxon Library
The daysInMonth property will return the numbers of days in the month for any given Luxon date.
const DateTime = luxon.DateTime
const Info = luxon.Info
const app = Vue.createApp({
data: function () {
return {
months: Info.months(),
years: [2021, 2022, 2023, 2024, 2025],
selectedMonth: 1,
selectedYear: 2021
}
},
computed: {
daysInMonth: function () {
return DateTime.local(this.selectedYear, this.selectedMonth).daysInMonth
}
}
})
const vm = app.mount('#app')
<div id="app">
<select v-model="selectedMonth">
<option v-for="(month, index) in months"
:value="index + 1">{{ month }}</option>
</select>
<select v-model="selectedYear">
<option v-for="year in years"
:value="year">{{ year }}</option>
</select>
<h1>{{ daysInMonth }}</h1>
</div>
Using the Date Object
Unfortunately, the native Date object does not provide a property to get the numbers of days of the current month. However, it is possible to get the last day of the current month by requesting the 0 day of the next month.
It is important to note that the Date Object uses 0 for the first month of the year.
const app = Vue.createApp({
data: function () {
return {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
years: [2021, 2022, 2023, 2024, 2025],
selectedMonth: 0,
selectedYear: 2021
}
},
computed: {
daysInMonth: function () {
return new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate()
}
}
})
const vm = app.mount('#app')
<div id="app">
<select v-model="selectedMonth">
<option v-for="(month, index) in months"
:value="index">{{ month }}</option>
</select>
<select v-model="selectedYear">
<option v-for="year in years"
:value="year">{{ year }}</option>
</select>
<h1>{{ daysInMonth }}</h1>
</div>
Start day of the month
When creating a calendar application it is important to know what day of the week that a month begins. This is a fairly straight forward process regardless if you are using the Luxon library or the Date with one notiable exception, which will be show later.
Using the Luxon library
The weekday property can be used to get the day of the week that date lands and therefore can be used to retrieve which day of the week a month begins. This property will return a number where 1 is Monday and 7 is Sunday.
It is important to note that if you are starting your week on Sunday, as shown above, you will need to a conversion so that 0 is for Sunday.
const DateTime = luxon.DateTime
const Info = luxon.Info
const app = Vue.createApp({
data: function () {
return {
months: Info.months(),
years: [2021, 2022, 2023, 2024, 2025],
selectedMonth: 8,
selectedYear: 2021
}
},
computed: {
dayOfWeek: function () {
return DateTime.local(this.selectedYear, this.selectedMonth).weekday
},
startWithSunday: function () {
const date = DateTime.local(this.selectedYear, this.selectedMonth)
return date.weekday === 7 ? 0 : date.weekday
},
dayOfWeekName: function () {
return DateTime.local(this.selectedYear, this.selectedMonth).weekdayLong
}
}
})
const vm = app.mount('#app')
<div id="app">
<select v-model="selectedMonth">
<option v-for="(month, index) in months"
:value="index + 1">{{ month }}</option>
</select>
<select v-model="selectedYear">
<option v-for="year in years"
:value="year">{{ year }}</option>
</select>
<h1>{{ dayOfWeek }}</h1>
<h1>{{ dayOfWeekName }}</h1>
<h1>{{ startWithSunday }}</h1>
<h1>{{ dayOfWeekName }}</h1>
</div>
Using the Date Object
The native Date Object has the getDay() method which will retrieve the day of the week of a date as a number with 0 representing Sunday.
const app = Vue.createApp({
data: function () {
return {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
years: [2021, 2022, 2023, 2024, 2025],
selectedMonth: 7,
selectedYear: 2021
}
},
computed: {
dayOfWeek: function () {
return new Date(this.selectedYear, this.selectedMonth, 1).getDay()
},
dayOfWeekName: function () {
return this.days[this.dayOfWeek]
}
}
})
const vm = app.mount('#app')
<div id="app">
<select v-model="selectedMonth">
<option v-for="(month, index) in months"
:value="index">{{ month }}</option>
</select>
<select v-model="selectedYear">
<option v-for="year in years"
:value="year">{{ year }}</option>
</select>
<h1>{{ dayOfWeek }}</h1>
<h1>{{ dayOfWeekName }}</h1>
</div>
Comparing Dates
Being able to compare dates is important for any application dealing with dates. Knowing if one date comes after another OR if two dates share the same day is a vital. The following will demonstrate how to compare two dates.
Using Luxon
Luxon has simplified the process of comparing two dates and allows dates to be compared using standard comparison operators.
const date1 = DateTime.local(2021, 03, 21)
const date2 = DateTime.local(2021, 03, 21)
if (date1.hadSame(date2, 'day')) {
console.log('Dates are the same')
} else if (date1 > date2) {
console.log('Date1 comes later')
} else if (date2 > date1) {
console.log('Date2 comes later')
}