Hey ,
I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.
Please upgrade (use this link) access this content.
I'm super eager to help you learn more!
You can create a Datepicker for any month of any year. The next thing is to allow users to switch between months with the previous and next buttons.
For the buttons to work, we need to add an event listener to .datepicker__buttons.
If you recall from the previous lesson, we created the Datepicker this way:
// Add the datepicker into the DOM
form.appendChild(createDatepicker(date))
We don’t want to ask users to create the event listeners themselves. We want to create the listeners for them. To do this, we create event listeners inside createDatepicker.
Event listeners can only be added to Nodes. This means we can only create an event listener after creating the datepicker’s innerHTML.
const createDatepicker = date => {
// ...
datepicker.innerHTML = /*...*/
const previousNextButtons = datepicker.querySelector('datepicker__buttons')
previousNextButtons.addEventListener('click', event => {
// ...
})
// ...
}
When a user clicks on the next button, we want to show next month’s calendar. This means we must:
textContent and datetime attribute of the year-month indicatorpreviousNextButtons.addEventListener('click', event => {
if (!event.target.matches('button')) return
if (event.target.matches('.datepicker__prev')) {
// Show previous month
}
if (event.target.matches('.datepicker__next')) {
// Show next month
}
})
We need to know what’s the current year-month on the Datepicker. We can get this information from the datetime attribute.
if (event.target.matches('.datepicker__next')) {
const time = datepicker.querySelector('.datepicker__year-month').firstElementChild
const datetime = time.getAttribute('datetime')
console.log(datetime)
}
We need to create a Date from this datetime attribute. The simplest way is to use new Date with this datetime attribute value.
if (event.target.matches('.datepicker__next')) {
const timeEl = datepicker.querySelector('.datepicker__year-month').firstElementChild
const datetime = timeEl.getAttribute('datetime')
const currentDate = new Date(datetime)
console.log(currentDate)
}
This works. But you should try not to create dates with date strings. Things will break if you make a small mistake. You should always create dates with the arguments method. I wrote about this back in “Setting a specific date” lesson.
To create a date with arguments, we can create a new function called datetimeToDate. This name of this function explains we’re converting a datetime attribute into a Date object.
const datetimeToDate = datetime => {
// ...
}
We know the datetime attribute has the format: YYYY-MM (like 2019-02). If we split the datetime by -, we can get the year and month easily.
const datetimeToDate = datetime => {
const [year, month] = datetime.split('-')
console.log(year) // 2019
console.log(month) // 02
}
datetimeToDate('2019-02')
year and month values are strings. If we want to use the arguments approach to create a new Date, we need to convert these strings into numbers.
We can convert them into numbers with map and parseInt.
const datetimeToDate = datetime => {
const [year, month] = datetime.split('-')
.map(num => parseInt(num))
console.log(year) // 2019
console.log(month) // 02
}
datetimeToDate('2019-02')
To create a date from Datetime, we can pass the year and month arguments into new Date.
const datetimeToDate = datetime => {
const [year, month] = datetime.split('-')
.map(num => parseInt(num))
// Remember, `month` needs to be zero-indexed
return new Date(year, month - 1)
}
Using it:
if (event.target.matches('.datepicker__next')) {
// ...
const currentDate = datetimeToDate(datetime)
}
Once we know the current date, we can use its value to create a Date for the next month.
if (event.target.matches('.datepicker__next')) {
// ...
const currentDate = datetimeToDate(datetime)
const year = currentDate.getFullYear()
const month = currentDate.getMonth()
const targetDate = new Date(year, month + 1)
}
Once we know what’s the next month, we can change the year-month indicator’s textContent and datetime attributes.
if (event.target.matches('.datepicker__next')) {
// ...
const targetDate = new Date(year, month + 1)
const targetMonth = targetDate.getMonth()
const monthName = monthsInAYear[targetMonth]
const datetimeMonth = (targetMonth + 1).toString().padStart(2, '0')
// Update Text Content and datetime attribute
time.textContent = `${monthName} ${year}`
time.setAttribute('datetime', `${year}-${datetimeMonth}"`)
}
It’s simple to update the date grid once you know what’s the next month. All we need to do is feed targetDate into createDateGridHTML.
if (event.target.matches('.datepicker__next')) {
// ...
// ...
const dategrid = datepicker.querySelector('.datepicker__date-grid')
dategrid.innerHTML = createDateGridHTML(targetDate)
}
You should be able to write the code for the previous button on your own. It uses the same concept.
if (event.target.matches('.datepicker__previous')) {
// 1. Find out what's the currently selected month
const time = datepicker.querySelector('.datepicker__year-month').firstElementChild
const datetime = time.getAttribute('datetime')
const currentDate = datetimeToDate(datetime)
// 2. Figure out what's the previous month
const year = currentDate.getFullYear()
const month = currentDate.getMonth()
const targetDate = new Date(year, month - 1)
// 3. Update the year-month indicator
const targetMonth = targetDate.getMonth()
const monthName = monthsInAYear[targetMonth]
const datetimeMonth = (targetMonth + 1).toString().padStart(2, '0')
time.textContent = `${monthName} ${year}`
time.setAttribute('datetime', `${year}-${datetimeMonth}"`)
// 4. Update the date-grid
const dategrid = datepicker.querySelector('.datepicker__date-grid')
dategrid.innerHTML = createDateGridHTML(targetDate)
}
At this point, you’ll notice we do two things when a user clicks the previous or next button.
<time> element’s textContent and datetime attributeTo change these two things, we need to find the target date. Once we have the target date, we can use functions to change the time element and date grid.
We used these get the current date in both if statements.
const time = datepicker.querySelector('.datepicker__year-month').firstElementChild
const datetime = time.getAttribute('datetime')
const currentDate = datetimeToDate(datetime)
We can group them into a function.
const getDateFromYearMonthIndicator = _ => {
const time = datepicker.querySelector('.datepicker__year-month').firstElementChild
const datetime = time.getAttribute('datetime')
return datetimeToDate(datetime)
}
If we put getDateFromYearMonthIndicator inside the Datepicker, we don’t need to pass in the datepicker variable.
const createDatepicker = date => {
// ...
const datepicker.innerHTML = // ...
// ...
const getDateFromYearMonthIndicator = _ => {
const time = datepicker.querySelector('.datepicker__year-month').firstElementChild
const datetime = time.getAttribute('datetime')
return datetimeToDate(datetime)
}
}
Using it:
previousNextButtons.addEventListener('click', event => {
const currentDate = getDateFromYearMonthIndicator()
// ...
}
We used these to get the target date
previousNextButtons.addEventListener('click', event => {
const year = currentDate.getFullYear()
const month = currentDate.getMonth()
if (event.target.matches('.datepicker__previous')) {
const targetDate = new Date(year, month - 1)
// ...
}
if (event.target.matches('.datepicker__next')) {
const targetDate = new Date(year, month + 1)
}
})
We can’t simplify this into a function that makes sense, so we’ll leave them. The best we can use a ternary operator instead of two if statements.
previousNextButtons.addEventListener('click', event => {
// ...
const year = currentDate.getFullYear()
const month = currentDate.getMonth()
// Finds the previous or next month
const targetDate = event.target.matches('.datepicker__previous')
? new Date(year, month - 1)
: new Date(year, month + 1)
// ...
})
We used these to update the time element’s textContent and datetime attribute.
const year = date.getFullYear()
const targetMonth = targetDate.getMonth()
const monthName = monthsInAYear[targetMonth]
const datetimeMonth = (targetMonth + 1).toString().padStart(2, '0')
time.textContent = `${monthName} ${year}`
time.setAttribute('datetime', `${year}-${datetimeMonth}"`)
We can put this into a function
const updateYearMonthIndicatorTimeElement = date => {
const time = datepicker.querySelector('.datepicker__year-month').firstElementChild
const year = date.getFullYear()
const targetMonth = date.getMonth()
const monthName = monthsInAYear[targetMonth]
const datetimeMonth = (targetMonth + 1).toString().padStart(2, '0')
time.textContent = `${monthName} ${year}`
time.setAttribute('datetime', `${year}-${datetimeMonth}"`)
}
Using it:
previousNextButtons.addEventListener('click', event => {
// ...
updateYearMonthIndicatorTimeElement(targetDate)
// ...
})
We used these to update the date grid.
previousNextButtons.addEventListener('click', event => {
// ...
if (event.target.matches('.datepicker__previous')) {
const dategrid = datepicker.querySelector('.datepicker__date-grid')
const targetDate = new Date(year, month - 1)
dategrid.innerHTML = createDateGridHTML(targetDate)
}
if (event.target.matches('.datepicker__next')) {
const dategrid = datepicker.querySelector('.datepicker__date-grid')
const targetDate = new Date(year, month + 1)
dategrid.innerHTML = createDateGridHTML(targetDate)
}
})
Since targetDate is declared outside of the if statements, we can create the date grid outside of any if statements.
previousNextButtons.addEventListener('click', event => {
// ...
const targetDate = event.target.matches('.datepicker__previous')
? new Date(year, month - 1)
: new Date(year, month + 1)
// ...
const dategrid = datepicker.querySelector('.datepicker__date-grid')
dategrid.innerHTML = createDateGridHTML(targetDate)
})
There are a few more things we can do to clean up the code.
The code for making the year-month indicator and the code for updating the year-month indicator were similar.
In both cases, you need to set year, month, monthName, and datetimeMonth variables.
// Making the time element
const createDatepicker = date => {
const year = date.getFullYear()
const month = date.getMonth()
const monthName = monthsInAYear[month]
const datetimeMonth = (month + 1).toString().padStart(2, '0')
// ...
const calendar = `
<div class="datepicker__calendar">
<div class="datepicker__year-month">
<time datetime="${year}-${datetimeMonth}">${monthName} ${year}</time>
</div>
<!-- ... -->
</div>
`
}
// Updating the time element
const updateYearMonthIndicatorTimeElement = date => {
const time = datepicker.querySelector('.datepicker__year-month').firstElementChild
const year = date.getFullYear()
const targetMonth = date.getMonth()
const monthName = monthsInAYear[targetMonth]
const datetimeMonth = (targetMonth + 1).toString().padStart(2, '0')
time.textContent = `${monthName} ${year}`
time.setAttribute('datetime', `${year}-${datetimeMonth}"`)
}
If we returned <time> element as a HTML string in the function, we can use it to create and update the year-month indicator.
We’ll change the function’s name from updateYearMonthIndicatorTimeElement to creaetYearMonthIndicatorTimeElement to go with the return statement.
const createYearMonthIndicatorTimeElement = date => {
const year = date.getFullYear()
const targetMonth = date.getMonth()
const monthName = monthsInAYear[targetMonth]
const datetimeMonth = (targetMonth + 1).toString().padStart(2, '0')
return `
<time datetime="${year}-${datetimeMonth}">${monthName} ${year}</time>
`
}
Also, did you notice we only used monthsInAYear inside createYearMonthIndicatorTimeElement? Let’s put monthsInAYear inside this function to make the code neater.
const createYearMonthIndicatorTimeElement = date => {
const monthsInAYear = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
const year = date.getFullYear()
const targetMonth = date.getMonth()
const monthName = monthsInAYear[targetMonth]
const datetimeMonth = toTwoDigitString(targetMonth + 1)
return `
<time datetime="${year}-${datetimeMonth}">${monthName} ${year}</time>
`
}
Using it:
// Making the time element
const createDatepicker = date => {
const year = date.getFullYear()
const month = date.getMonth()
const monthName = monthsInAYear[month]
const datetimeMonth = (month + 1).toString().padStart(2, '0')
// ...
const calendar = `
<div class="datepicker__calendar">
<div class="datepicker__year-month">
${createYearMonthIndicatorTimeElement(date)}
</div>
<!-- ... -->
</div>
`
}
// Updating the time element
previousNextButtons.addEventListener('click', event => {
const targetDate = event.target.matches('.datepicker__previous')
? new Date(year, month - 1)
: new Date(year, month + 1)
// ...
const yearMonthIndicator = datepicker.querySelector('.datepicker__year-month')
yearMonthIndicator.innerHTML = createYearMonthIndicatorTimeElement(date)
})
We used this line of code three times to create a two-digit string for the datetime attribute.
// Used this twice
const datetimeMonth = (month + 1).toString().padStart(2, '0')
// Used this once
const datetimeDay = day.toString().padStart(2, '0')
We can create a function called toTwoDigitString so we don’t have to write so much.
const toTwoDigitString = number => {
return number.toString().padStart(2, '0')
}
Using toTwoDigitString:
const datetimeMonth = toTwoDigitString(month + 1)
const datetimeDay = toTwoDigitString(day)
That’s it!