Display the Current Month OR Next Month

This code allows you to display the current month or next month with more specialized control.

Copy Code

<script>
  function getCurrentOrNextMonth() {
  var currentDate = new Date();
  var endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);

// Check if it's within 5 days of the end of the current month
   if (currentDate.getDate() <= endOfMonth.getDate() - 5) {
   return monthNames[currentDate.getMonth()];
  } else {

// If within 5 days of the end, return the next month
   var nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
   return monthNames[nextMonth.getMonth()];
  }
}

var monthNames = [
"January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"
];

// Update the content of elements with class "current-month"
   var currentMonthElements = document.querySelectorAll('.current-month');
   for (var i = 0; i < currentMonthElements.length; i++) {
   currentMonthElements[i].textContent = getCurrentOrNextMonth();
}
</script>

This code allows for more control when it comes to displaying the month.

For example:

Let's say you're a freelance web designer, and it's March 29th or 30th. You may not want your hero section to say "Now accepting projects for March" anymore. It's time to move on to the next month! That's why I put this together.

Basically if today's date is less than 5 days away from the next month, the code will return the next month, instead of the current month. The value is currently set to 5, but you can change it to whatever you want.

How to use this code:

First you'll need to paste this script in the <head> tag of your webflow project in the page settings.

Then all you need to do is wrap your text in a span, and apply the class 'current-month' to that span.

Publish your site and it's good to go!