Difference between revisions of "DOM Calendar"

From ProgZoo
Jump to navigation Jump to search
 
(26 intermediate revisions by the same user not shown)
Line 7: Line 7:
**day of the week in French
**day of the week in French
**month in French
**month in French
The function toLocalDateString takes an ''options'' object. You can set:
 
*<code>weekday<code> to one of <code>long</code> <code>short</code> <code>numeric</code>  
The phrase:
let today = new Date()
sets the variable <code>today</code> to today's date
The function <code>toLocaleDateString</code> takes an ''options'' object. You can set:
*weekday to <code>long</code> <code>short</code> <code>narrow</code>  
*month to <code>long</code> <code>short</code> <code>narrow</code>  
*the first parameter can be a language such as "en", "fr", "de", "zh"
 
<pre class=usr>
<pre class=usr>
let today = new Date();
let today = new Date();
Line 25: Line 32:
${today.toLocaleDateString('fr',{month:'long'})} <br>
${today.toLocaleDateString('fr',{month:'long'})} <br>
`;
`;
</pre>
</div>
==Show 7 days from now==
<div class=qu data-width=300>
The method <code>getTime()</code> gives the number of millseconds since a fixed date (1st Jan 1970).
If you want to add one day you must add 86400000 milliseconds, this is 1000*60*60*24
<pre class=usr>
//This gives the number of milliseconds since 1st Jan 1970
let n = new Date().getTime();
for(let i=-3; i<3; i++){
  //One day has 1000*60*60*24 milliseconds
  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);
}
</pre>
<pre class=ans>
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);
}
</pre>
</div>
==Show 7 days from the first of this month==
<div class=qu data-width=300>
You can find the first of this month...
*Get today's date
*Use <code>first.setDate(1)</code> to set the day of the month
<pre class=usr>
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);
}
</pre>
<pre class=ans>
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);
}
</pre>
</div>
==Show the last 7 days of last month==
<div class=qu data-width=300>
You can find the first of this month...
*Get the first of this month
*Subtract 7 days
<pre class=usr>
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);
}
</pre>
<pre class=ans>
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);
}
</pre>
</div>
==Show the first Sunday of this month==
<div class=qu data-width=300>
You can find the first Sunday of this month...
*Get the first of this month
*If that day is Sunday do nothing
*Add 7 - dayNumber
<pre class=usr>
</pre>
<pre class=ans>
let sun = new Date();
sun.setDate(1);
if (sun.getDay() === 0){
  //The first happens to be a Sunday, do nothing
}else{
  sun = new Date(sun.getTime() + 1000*60*60*24 * (7-sun.getDay()));
}
let n = sun.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',weekday:'short'});
  document.body.append(d);
}
</pre>
</div>
==Show the week that includes the first of this month==
<div class=qu data-width=300>
<pre class=usr>
let mon = new Date();
mon.setDate(1);
mon = new Date(mon.getTime() - 1000*60*60*24 * mon.getDay());
let n = mon.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',weekday:'short'});
  document.body.append(d);
}
</pre>
<pre class=ans>
let mon = new Date();
mon.setDate(1);
mon = new Date(mon.getTime() - 1000*60*60*24 * mon.getDay());
let n = mon.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',weekday:'short'});
  document.body.append(d);
}
</pre>
</pre>
</div>
</div>

Latest revision as of 07:36, 1 February 2022




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 toLocaleDateString 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

The method getTime() gives the number of millseconds since a fixed date (1st Jan 1970).

If you want to add one day you must add 86400000 milliseconds, this is 1000*60*60*24

//This gives the number of milliseconds since 1st Jan 1970
let n = new Date().getTime();
for(let i=-3; i<3; i++){
  //One day has 1000*60*60*24 milliseconds
  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 the first of this month
  • Subtract 7 days
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);
}

Show the first Sunday of this month

You can find the first Sunday of this month...

  • Get the first of this month
  • If that day is Sunday do nothing
  • Add 7 - dayNumber

let sun = new Date();
sun.setDate(1);
if (sun.getDay() === 0){
  //The first happens to be a Sunday, do nothing
}else{
  sun = new Date(sun.getTime() + 1000*60*60*24 * (7-sun.getDay()));
}
let n = sun.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',weekday:'short'});
  document.body.append(d);
}

Show the week that includes the first of this month

let mon = new Date();
mon.setDate(1);
mon = new Date(mon.getTime() - 1000*60*60*24 * mon.getDay());
let n = mon.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',weekday:'short'});
  document.body.append(d);
}
let mon = new Date();
mon.setDate(1);
mon = new Date(mon.getTime() - 1000*60*60*24 * mon.getDay());
let n = mon.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',weekday:'short'});
  document.body.append(d);
}