(js) => blog

Date

Page section: playground
TAGS: date
More on date

Today’s date is used by running the function today() when the page loads:


function today() {
    const now = new Date();
    const firstPara = document.getElementById('today');
    firstPara.innerHTML = `Today is <i>${now.toDateString()}</i>`;
}

today();

A current time and date stamp can be created using:

const nuDate = new Date();

function dateOne() {
    document.getElementById('date1').innerHTML = new Date();
    }

Today ?

Formatting

There are a number of methods that can be used to get one part of the Date() object:

Using const now = new Date()

code current
value		 what it does
now.getFullYear the year in 4 digits
now.getMonth the month in single or double digits starting at 0
now.getDate the day of the month from 1 to 31
now.getDay the day of the week counting from 0 to 6
now.getSeconds seconds past the current minute
now.getMinutes minutes past the hour
now.getHours hours from 0 to 23 count starting at midnight
now.getYear DEPRECATED

What year is it?

Using the getFullYear() method.

function dateTwo() {
    let d = new Date();
document.getElementById('date2').innerHTML = d.getFullYear();
}

Paragraphs

View contents of: /static/js/date.js 

// Like topmenu.js the link to this file had to be at the bottom of the page to work

// Solution: add 'defer' to the script tag: <script src="js/date.js" defer></script>


// const modified = (document.getElementById('modified').innerHTML =
//   document.lastModified);

// This next method uses code from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

// With elements it only works on the first element
// window.onload = alert('loaded from JS file');

let date = document.querySelector('#modified');
let lastMod = document.lastModified;

date.textContent = 'Change this into a better format. lastModified: ' + lastMod;

// Next is just getting a simple date format

let theTime = new Date();
document.querySelector('#time6').textContent =
  theTime.getDate() + '/' + theTime.getMonth() + '/' + theTime.getFullYear();

// These are the five different paragraphs

function loadParagraphs() {
  let today = new Date();
  document.querySelector('#time2').innerHTML =
    '<b>2.</b> <code>new Date()</code>:  ' + new Date();
  document.querySelector('#time3').innerHTML =
    '<b>3.</b> <code>new Date(0)</code>: ' + new Date(0);
  document.querySelector('#time4').innerHTML =
    '<b>4.</b> <code>new Date(epoch)</code>: ' + new Date(0);
  document.querySelector('#time5').innerHTML =
    '<b>5.</b> <code>new Date(1978, 10, 14)</code>: ' + new Date(1978, 10, 14);

  document.querySelector('#time6').innerHTML =
    "<b>6.</b> <code>today.getDay() + ' ' + today.getDate()</code>: " +
    today.getDay() +
    ' ' +
    today.getDate();

  document.querySelector('#time7').innerHTML =
    '<b>7. using</b> <code>today.getFullYear()</code> :' + today.getFullYear();

  document.querySelector('#time8').innerHTML =
    '<b>8. using</b> <code>today.toDateString()</code> :' +
    today.toDateString() +
    ' ✔';

  document.querySelector('#time9').innerHTML =
    '<b>9. using</b> <code>today.toISOString()</code> :' + today.toISOString();
}



// Date table
const td = document.querySelectorAll('#method-table td');
const now = new Date();

td[1].textContent = now.getFullYear();
td[4].textContent = now.getMonth();
td[7].textContent = now.getDate();
td[10].textContent = now.getDay();
td[13].textContent = now.getSeconds();
td[16].textContent = now.getMinutes();
td[19].textContent = now.getHours();
td[22].textContent = now.getYear();

console.log(td);

Table of Contents