Operazioni sulle date | Appunti Digitali

Trovare l'ultimo giorno del mese corrente

var oggi = new Date();
//new Date(anno, mese, 1) da come risultato il primo giorno del mese
//new Date(anno, mese, 0) fa tornare indietro al giorno prima del giorno 1
//quindi all'ultimo giorno DEL MESE PRECEDENTE
//per avere quindi l'ultimo giorno DEL MESE CORRENTE
//devo tornare indietro di un giorno ma partendo dal mese successivo
var ultimoGiorno = new Date(oggi.getFullYear(), (parseInt(oggi.getMonth(), 10) + 1), 0).getDate();

Trovare la data di ieri / domani

var ieri = new Date((new Date()).valueOf() - 1000 * 60 * 60 * 24);
var domani = new Date((new Date()).valueOf() + 1000 * 60 * 60 * 24);

Trovare la differenza in giorni tra due date

var differenzaGiorni = Math.ceil(Math.abs(new Date() - new Date('1982-05-19')) / (1000 * 60 * 60 * 24));

Trovare la differenza in mesi tra due date

var oggi = new Date();
var elena = new Date('1982-05-19');
var differenzaMesi = Math.max(0, (oggi.getFullYear() - elena.getFullYear()) * 12 - elena.getMonth() + oggi.getMonth());

Trovare se una data è compresa tra altre due date

var oggi = new Date();
var primaData = new Date('2020-03-01');
var secondaData = new Date('2020-08-31');
var compresa = oggi.getTime() >= primaData.getTime() && oggi.getTime() <= secondaData.getTime();

Trovare se una certa data è uguale a oggi

var data = new Date('2025-05-15');
var dataUgualeOggi = data.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10);

Trovare se un certo anno è bisestile

var annoBisestile2024 = new Date(2024, 1, 29).getDate() === 29; //true

Countdown

<p>giorni: <span id="giorni"></span> ore: <span id="ore"></span>  minuti: <span id="minuti"></span> secondi: <span id="secondi"></span></p>

body, p {
  margin: 0;
}
p {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
  background: -webkit-linear-gradient(to right, #E684AE, #79CBCA, #77A1D3);
  background: linear-gradient(to right, #E684AE, #79CBCA, #77A1D3);

}
span {
  margin: 0.5rem;
  font-weight: bold;
}

let natale2025 = new Date(2025, 11, 25).getTime();
let spanGG = document.getElementById("giorni");
let spanHH = document.getElementById("ore");
let spanMM = document.getElementById("minuti");
let spanSS = document.getElementById("secondi");

let timer = setInterval(function () {

  let msOggi = new Date().getTime();

  let differenza = natale2025 - msOggi;

  let gg = Math.floor(differenza / (1000 * 60 * 60 * 24));
  let hh = Math.floor((differenza % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let mm = Math.floor((differenza % (1000 * 60 * 60)) / (1000 * 60));
  let ss = Math.floor((differenza % (1000 * 60)) / 1000);


  spanGG.innerText = gg;
  spanHH.innerText = hh;
  spanMM.innerText = mm;
  spanSS.innerText = ss;

}, 1000);

Orologio

<p>ore: <span id="hh"></span> minuti: <span id="mm"></span> secondi: <span id="ss"></span></p>

body, p {
  margin: 0;
}
p {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
  background: -webkit-linear-gradient(to right, #92FE9D, #00C9FF);
  background: linear-gradient(to right, #92FE9D, #00C9FF);


}
span {
  margin: 0.5rem;
  font-weight: bold;
}

let hh = document.getElementById('hh');
let mm = document.getElementById('mm');
let ss = document.getElementById('ss');

setInterval(function() {
  let now = new Date();
  hh.innerText = now.getHours();
  mm.innerText = now.getMinutes();
  ss.innerText = now.getSeconds();
}, 1000);

Trovare l'età a partire dalla data di nascita

<p>Se sei nato il 16 settembre 1993 la tua età è di <span id="anni"></span> anni, <span id="mesi"></span> mesi, <span id="giorni"></span> giorni</p>

body, p {
  margin: 0;
}
p {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vw;
  background-image: linear-gradient(to top, #f5efef 0%, #feada6 100%);
}

span {
  margin: 0.5rem;
  font-weight: bold;
}

let oggi = new Date();
let dataNascita = new Date('1993-09-16');

let anniEta = oggi.getFullYear() - dataNascita.getFullYear();

let mesiEta;
if (oggi.getMonth() >= dataNascita.getMonth()) {
  mesiEta = oggi.getMonth() - dataNascita.getMonth();
} else {
  anniEta--;
  mesiEta = 12 + oggi.getMonth() - dataNascita.getMonth();
}

let giorniEta;
if (oggi.getDate() >= dataNascita.getDate()) {
  giorniEta = oggi.getDate() - dataNascita.getDate();
} else {
  mesiEta--;
  giorniEta = 31 + oggi.getDate() - dataNascita.getDate();

  if (mesiEta < 0) {
    mesiEta = 11;
    anniEta--;
  }
}

document.getElementById('anni').innerText = anniEta;
document.getElementById('mesi').innerText = mesiEta;
document.getElementById('giorni').innerText = giorniEta;

Calendario

<table id="table">
  <caption>
    <p><button id="prev-month">←</button> <span id="current-month"></span> <button id="next-month">→</button>
    </p>
    <p><button id="prev-year">←</button> <span id="current-year"></span> <button id="next-year">→</button></p>
  </caption>
  <thead>
    <th>Dom</th>
    <th>Lun</th>
    <th>Mar</th>
    <th>Mer</th>
    <th>Gio</th>
    <th>Ven</th>
    <th>Sab</th>
  </thead>
  <tbody id="tbody"></tbody>
</table>

body, p {
  margin: 0;
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
}

table {
  background-color: rgba(255, 255, 255, 0.2);
}
caption p {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem;
  background-color: #6BBBFF;
}
td, th {
  padding: 0.5rem;
  text-align: center;
}
.oggi {
  background-color: #5D9FFF;
}

let table = document.getElementById('table');
let prevMonthArrow = document.getElementById('prev-month');
let nextMonthArrow = document.getElementById('next-month');
let prevYearArrow = document.getElementById('prev-year');
let nextYearArrow = document.getElementById('next-year');
let currentMonthName = document.getElementById('current-month');
let currentYearName = document.getElementById('current-year');
let tbody = document.getElementById('tbody');
let oggi = new Date();

function updateLabels() {
  currentMonthName.innerText = oggi.toLocaleString('default', { month: 'long' });
  currentYearName.innerText = oggi.getFullYear();
}

//http://www.frontcoded.com/splitting-javascript-array-into-chunks.html
function dividiArray(arr) {
  var sottoArray = [],
      i;
  for (i = 0; i < arr.length; i += 7) {
    sottoArray.push(arr.slice(i, i + 7));
  }
  return sottoArray;
}

function resetTable() {
  while (tbody.firstChild) {
    tbody.removeChild(tbody.lastChild);
  }
}

function buildCalendar() {
  let lastDayOfMonth = new Date(oggi.getFullYear(), oggi.getMonth() + 1, 0).getDate();
  let startDayOfTheWeek = new Date(oggi.getFullYear(), oggi.getMonth(), 1).getDay();
  let endDayOfTheWeek = new Date(oggi.getFullYear(), oggi.getMonth(), lastDayOfMonth).getDay();
  let arrayOfDays = [];

  for (let i = 1; i <= lastDayOfMonth; i++) {
    arrayOfDays.push(i);
  }
  //aggiungo giorni finti prima del primo giorno
  for (let i = 0; i < startDayOfTheWeek; i++) {
    arrayOfDays.unshift(0);
  }
  //aggiungo giorni finti dopo l'ultimo giorno
  for (let i = endDayOfTheWeek; i < 6; i++) {
    arrayOfDays.push(0);
  }

  let arrayOfWeeks = dividiArray(arrayOfDays);
  arrayOfWeeks.forEach((week, index) => {
    let tr = document.createElement('tr');
    tr.classList.add('week-' + (index + 1));
    week.forEach((el, i) => {
      let td = document.createElement('td');
      if (el == 0) {
        td.classList.add('fake-day');
      }
      else {
        td.classList.add('day-' + el);
        if (oggi.getFullYear() == new Date().getFullYear() && oggi.getMonth() == new Date().getMonth() && el == new Date().getDate()) {
          td.classList.add('oggi');
        }
        td.innerText = el;
      }

      tr.appendChild(td);
    });


    tbody.appendChild(tr);

  });
}

updateLabels();
buildCalendar();

table.addEventListener('click', function (event) {
  switch (event.target.id) {
    case "prev-month":
      oggi.setMonth(oggi.getMonth() - 1);
      updateLabels();
      resetTable();
      buildCalendar();
      break;
    case "next-month":
      oggi.setMonth(oggi.getMonth() + 1);
      updateLabels();
      resetTable();
      buildCalendar();
      break;
    case "prev-year":
      oggi.setFullYear(oggi.getFullYear() - 1);
      updateLabels();
      resetTable();
      buildCalendar();
      break;
    case "next-year":
      oggi.setFullYear(oggi.getFullYear() + 1);
      updateLabels();
      resetTable();
      buildCalendar();
      break;

    default:
      break;
  }
})