DOM Calendar

From ProgZoo
Jump to navigation Jump to search



Display dates as specified

  • For today's date show
    • day of the week in English
    • month in English
    • day of the week in French
    • month in French

The phrase:

let today = new Date()

sets the variable today to today's date The function toLocalDateString takes an options object. You can set:

  • weekday to long short narrow
  • month to long short narrow
  • the first parameter can be a language such as "en", "fr", "de", "zh"
let today = new Date();
document.body.innerHTML = `
${today.toLocaleDateString('en',{weekday:'long'})} <br>
${today.toLocaleDateString('en',{weekday:'short'})} <br>
`;
let today = new Date();
document.body.innerHTML = `
${today.toLocaleDateString('en',{weekday:'long'})} <br>
${today.toLocaleDateString('en',{month:'long'})} <br>
${today.toLocaleDateString('fr',{weekday:'long'})} <br>
${today.toLocaleDateString('fr',{month:'long'})} <br>
`;

Show 7 days from now

let n = new Date().getTime();
for(let i=-3; i<3; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}
let n = new Date().getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}

Show 7 days from the first of this month

You can find the first of this month...

  • Get today's date
  • Use first.setDate(1) to set the day of the month
let first = new Date();
let n = first.getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}
let first = new Date();
first.setDate(1);
let n = first.getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}

Show the last 7 days of last month

You can find the first of this month...

  • Get today's date
  • Use first.setDate(1) to set the day of the month
let first = new Date();
let n = first.getTime();
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}
let first = new Date();
first.setDate(1);
let n = first.getTime() - 1000*60*60*24*7;
for(let i=0; i<7; i++){
  let dy = new Date(n + 1000*60*60*24*i);
  let d = document.createElement('div');
  d.innerHTML = dy.toLocaleDateString('en',{day:'2-digit',month:'short'});
  document.body.append(d);
}