← Snippets - Script

Dynamic Date

This is most often used on rates pages, where the client wants to write something like “These rates are current as of [date]”, and have it always display the current date.

Bootstrap 5 (vanilla javascript)

HTML

Insert this span tag wherever you want the date to go. It can go in any content area, on any page, but be careful not to place content inside it because that content will be wiped out (and replaced with today’s date).

<span class="displayDate"></span>

Javascript

This will generate the date in MM/DD/YYYY format.

var fullDate = new Date();
var twoDigitMonth = fullDate.getMonth()+ 1 +"";if(twoDigitMonth.length==1)  twoDigitMonth="0" +twoDigitMonth;
var twoDigitDate = fullDate.getDate()+"";if(twoDigitDate.length==1) twoDigitDate="0" +twoDigitDate;
var currentDate =  twoDigitMonth + "/" + twoDigitDate + "/" + fullDate.getFullYear();

Array.from(document.getElementsByClassName('displayDate')).forEach((span)=>{
  span.innerHTML = currentDate;
});

To generate the date in Month Day, Year format, you can use the following.

var fullDate = new Date();
var twoDigitMonth = fullDate.toLocaleString('default', { month: 'long' });
var twoDigitDate = fullDate.getDate()+"";if(twoDigitDate.length==1) twoDigitDate="0" +twoDigitDate;
var currentDate =  twoDigitMonth + " " + twoDigitDate + ", " + fullDate.getFullYear();

Array.from(document.getElementsByClassName('displayDate')).forEach((span)=>{
  span.innerHTML = currentDate;
});

Bootstrap 4 and down

How To

HTML

Insert this span tag wherever you want the date to go. It can go in any content area, on any page, but be careful not to place content inside it because that content will be wiped out (and replaced with today’s date).

<span class="displayDate"></span>

Script

This script can go inside the scripts.js, in the large function.

var fullDate = new Date();
var twoDigitMonth = fullDate.getMonth()+ 1 +"";if(twoDigitMonth.length==1)  twoDigitMonth="0" +twoDigitMonth;
var twoDigitDate = fullDate.getDate()+"";if(twoDigitDate.length==1) twoDigitDate="0" +twoDigitDate;
var currentDate =  twoDigitMonth + "/" + twoDigitDate + "/" + fullDate.getFullYear();

$('.displayDate').html(
    currentDate
);

Example Sites

Tags: bs2, bs3, bs4, bs5, vanilla javascript, script, jquery, javascript, js, html