JavaScript-päivämäärämenetelmät

Sisällysluettelo

    Näytä sisällysluettelo

new Date()-konstruktori

JavaScriptissä päivämääräobjektit luodaan new Date()-komennolla.

new Date() palauttaa päivämääräobjektin nykyisen päivämäärän ja kellonajan kanssa.

Hanki nykyinen aika

const date = new Date();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>Create a new date object with the current date and time:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Päivämäärä Hanki menetelmät

getFullYear()

Hanki vuosi nelinumeroisena numerona (yyyy)

getMonth()

Hanki kuukausi numerona (0-11)

getDate()

Hanki päivä numerona (1-31)

getDay()

Hanki arkipäivä numerona (0-6)

getHours()

Hae tunti (0-23)

getMinutes()

Hanki minuutti (0-59)

getSeconds()

Hanki sekunti (0-59)

getMilliseconds()

Hanki millisekunti (0-999)

getTime()

Hanki aika (millisekuntia 1. tammikuuta 1970 lähtien)

Huomautus 1

Yllä olevat hakumenetelmät palauttavat paikallisen ajan.

Yleinen aika (UTC) on dokumentoitu tämän sivun alareunassa.

Muistio 2

Get-menetelmät palauttavat tiedot olemassa olevista päivämääräobjekteista.

Päivämääräobjektissa aika on staattinen. "Kello" ei "käy".

Päivämääräobjektin aika EI ole sama kuin nykyinen aika.

getFullYear()-menetelmä

Metodi getFullYear() palauttaa päivämäärän vuoden nelinumeroisena numerona:

Esimerkkejä

const d = new Date("2021-03-25");
d.getFullYear();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getFullYear() Method</h2>
<p>Return the full year of a date object:</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25")
document.getElementById("demo").innerHTML = d.getFullYear();
</script>

</body>
</html>

const d = new Date();
d.getFullYear();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The getFullYear() Method</h2>
<p>Return the full year of a date object:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>

</body>
</html>

Varoitus !

Vanha JavaScript-koodi saattaa käyttää epätyypillistä menetelmää getYear().

getYear() on tarkoitus palauttaa 2-numeroinen vuosi.

getYear() on vanhentunut. Älä käytä sitä!

getMonth()-menetelmä

Metodi getMonth() palauttaa päivämäärän kuukauden numerona (0-11).

Huomautus

JavaScriptissä tammikuu on kuukausi numero 0, helmikuu on numero 1, ...

Lopuksi joulukuu on kuukausi numero 11.

Esimerkkejä

const d = new Date("2021-03-25");
d.getMonth();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMonth() Method</h2>
<p>Return the month of a date as a number from 0 to 11.</p>
<p>To get the correct month number, you must add 1:</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25");
document.getElementById("demo").innerHTML = d.getMonth() + 1;
</script>

</body>
</html>

const d = new Date();
d.getMonth();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMonth() Method</h2>
<p>Return the month of a date as a number from 0 to 11.</p>
<p>To get the correct month number, you must add 1:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getMonth() + 1;
</script>

</body>
</html>

Huomautus

Voit käyttää useita nimiä palauttaaksesi kuukauden nimeksi:

Esimerkkejä

const months = ["January", "February", "March", "April", "May",
"June", "July", "August", "September", "October",
"November", "December"];

const d = new Date("2021-03-25");
let month = months[d.getMonth()];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>JavaScript getMonth()</h2>
<p>Return the month as a number.</p>
<p>You can use an array of names to return the month as a name:</p>

<p id="demo"></p>

<script>
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];

const d = new Date("2021-03-25");
let month = months[d.getMonth()];
document.getElementById("demo").innerHTML = month;
</script>

</body>
</html>

const months = ["January", "February", "March", "April", "May",
"June", "July", "August", "September", "October",
"November", "December"];

const d = new Date();
let month = months[d.getMonth()];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>JavaScript getMonth()</h2>
<p>Return the month as a number.</p>
<p>You can use an array of names to return the month as a name:</p>

<p id="demo"></p>

<script>
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];

const d = new Date();
let month = months[d.getMonth()];
document.getElementById("demo").innerHTML = month;
</script>

</body>
</html>

getDate()-menetelmä

Metodi getDate() palauttaa päivämäärän päivän numerona (1-31):

Esimerkkejä

const d = new Date("2021-03-25");
d.getDate();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDate() Method</h2>
<p>Return the day of a date as a number (1-31):</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25");
document.getElementById("demo").innerHTML = d.getDate();
</script>

</body>
</html>

const d = new Date();
d.getDate();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDate() Method</h2>
<p>Return the day of a date as a number (1-31):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getDate();
</script>

</body>
</html>

getHours()-menetelmä

Metodi getHours() palauttaa päivämäärän tunnit numerona (0-23):

Esimerkkejä

const d = new Date("2021-03-25");
d.getHours();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getHours() Method</h2>
<p>Return the hours of a date as a number (0-23):</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25");document.getElementById("demo").innerHTML = d.getHours();
</script>

</body>
</html>

const d = new Date();
d.getHours();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getHours() Method</h2>
<p>Return the hours of a date as a number (0-23):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getHours();
</script>

</body>
</html>

getMinutes()-menetelmä

Metodi getMinutes() palauttaa päivämäärän minuutit numeroina (0-59):

Esimerkkejä

const d = new Date("2021-03-25");
d.getMinutes();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMinutes() Method</h2>
<p>Returns the minutes of a date as a number (0-59):</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25");
document.getElementById("demo").innerHTML = d.getMinutes();
</script>

</body>
</html>

const d = new Date();
d.getMinutes();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMinutes() Method</h2>
<p>Returns the minutes of a date as a number (0-59):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getMinutes();
</script>

</body>
</html>

getSeconds()-menetelmä

Metodi getSeconds() palauttaa päivämäärän sekunnit numerona (0-59):

Esimerkkejä

const d = new Date("2021-03-25");
d.getSeconds();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getSeconds() Method</h2>
<p>Return the seconds of a date as a number (0-59):</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25");
document.getElementById("demo").innerHTML = d.getSeconds();
</script>

</body>
</html>

const d = new Date();
d.getSeconds();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getSeconds() Method</h2>
<p>Return the seconds of a date as a number (0-59):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getSeconds();
</script>

</body>
</html>

getMilliseconds()-menetelmä

Metodi getMilliseconds() palauttaa päivämäärän millisekunnit numerona (0-999):

Esimerkkejä

const d = new Date("2021-03-25");
d.getMilliseconds();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMilliseconds() Method</h2>
<p>Return the milliseconds of a date as a number (0-999):</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25");
document.getElementById("demo").innerHTML = d.getMilliseconds();
</script>

</body>
</html>

const d = new Date();
d.getMilliseconds();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMilliseconds() Method</h2>
<p>Return the milliseconds of a date as a number (0-999):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getMilliseconds();
</script>

</body>
</html>

getDay()-menetelmä

Metodi getDay() palauttaa päivämäärän viikonpäivän numerona (0-6).

Huomautus

JavaScriptissä viikon ensimmäinen päivä (päivä 0) on sunnuntai.

Jotkut maailman maat pitävät viikon ensimmäistä päivää maanantaina.

Esimerkkejä

const d = new Date("2021-03-25");
d.getDay();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDay() Method</h2>
<p>Return the weekday as a number:</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25");
document.getElementById("demo").innerHTML = d.getDay();
</script>

</body>
</html>

const d = new Date();
d.getDay();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDay() Method</h2>
<p>Return the weekday as a number:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
</script>

</body>
</html>

Huomautus

Voit käyttää joukkoa nimiä ja palauttaa viikonpäivän nimeksi getDay():

Esimerkkejä

const days = ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"];

const d = new Date("2021-03-25");
let day = days[d.getDay()];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDay() Method</h2>
<p>Return the weekday as a number.</p>
<p>You can use an array of names to return the weekday as a name:</p>

<p id="demo"></p>

<script>
const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

const d = new Date("2021-03-25");
let day = days[d.getDay()];
document.getElementById("demo").innerHTML = day;
</script>

</body>
</html>

const days = ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"];

const d = new Date();
let day = days[d.getDay()];

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDay() Method</h2>
<p>Return the weekday as a number.</p>
<p>You can use an array of names to return the weekday as a name:</p>

<p id="demo"></p>

<script>
const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

const d = new Date();
let day = days[d.getDay()];
document.getElementById("demo").innerHTML = day;
</script>

</body>
</html>

getTime()-menetelmä

Metodi getTime() palauttaa millisekuntien määrän 1. tammikuuta 1970 lähtien:

Esimerkkejä

const d = new Date("1970-01-01");
d.getTime();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getTime() Method</h2>
<p></p>
<p>Return the number of milliseconds since midnight January 1, 1970:</p>

<p id="demo"></p>

<script>
const d = new Date("1970-01-01");
document.getElementById("demo").innerHTML = d.getTime();
</script>

</body>
</html>

const d = new Date("2021-03-25");
d.getTime();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getTime() Method</h2>
<p></p>
<p>Return the number of milliseconds since midnight January 1, 1970:</p>

<p id="demo"></p>

<script>
const d = new Date("2021-03-25");
document.getElementById("demo").innerHTML = d.getTime();
</script>

</body>
</html>

const d = new Date();
d.getTime();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getTime() Method</h2>
<p></p>
<p>Return the number of milliseconds since midnight January 1, 1970:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>

</body>
</html>

Date.now()-menetelmä

Date.now() palauttaa millisekuntien määrän 1. tammikuuta 1970 lähtien.

Esimerkkejä

let ms = Date.now();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The Date.now() Method</h2>
<p>Return the current date/time in milliseconds since January 1, 1970:</p>

<p id="demo"></p>

<script>
const date = Date.now();
document.getElementById("demo").innerHTML = date;
</script>

</body>
</html>

Laske vuosien määrä vuodesta 1970/01/01:

const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const year = day * 365;

let years = Math.round(Date.now() / year);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using Date.now()</h2>
<p>Calculate the number of years since January 1, 1970:</p>

<p id="demo"></p>

<script>
// Calculate milliseconds in a year
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const year = day * 365;

// Divide Date.now() with a year
let years = Math.round(Date.now() / year);
document.getElementById("demo").innerHTML = years;
</script>

</body>
</html>

Päiväys.nyt() on Date-objektin staattinen menetelmä.

Et voi käyttää sitä päivämääräobjektissa, kuten myDate.now().

Syntaksi on aina Date.now().

UTC-päivämäärän hakumenetelmät

getUTCDate() / getDate()

Palauttaa UTC-päivämäärän

getUTCFullYear() / getFullYear()

Palauttaa UTC-vuoden

getUTCMonth() / getMonth()

Palauttaa UTC-kuukauden

getUTCDay() / getDay()

Palauttaa UTC-päivän

getUTCHours() / getHours()

Palauttaa UTC-tunnin

getUTCMinutes() / getMinutes()

Palauttaa UTC-minuutit

getUTCSeconds() / getSeconds()

Palauttaa UTC-sekunnit

getUTCMilliseconds() / getMilliseconds()

Palauttaa UTC millisekuntia

UTC methods use UTC time (Coordinated Universal Time).

UTC time is the same as GMT (Greenwich Mean Time).

The difference between Local time and UTC time can be up to 24 hours.





<script> function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.fillStyle='white'; grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; ctx.lineWidth = radius*0.1; ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fill(); ctx.stroke(); ctx.strokeStyle = "#333"; ctx.beginPath(); ctx.fillStyle = '#333'; ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var n; ctx.font = radius*0.15 + "px arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for(n = 1; n < 13; n++){ ang = n*Math.PI/6; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(n.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); } } function drawGlass(ctx, radius) { grad=ctx.createRadialGradient(-0.4*radius, -0.4*radius, 0, -0.4*radius, -0.4*radius, 14*radius/12); grad.addColorStop(0, "rgba(255,255,255,0.8)"); grad.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fill(); } function drawTime(ctx, radius, UTC, now){ if (UTC) { var hour = now.getUTCHours(); } else { var hour = now.getHours(); } var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second=(second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height/2; ctx.translate(radius, radius); radius = radius*0.90 timeShow(0); function timeShow(UTC) { var now = new Date(); //setInterval(drawClock, 1000); drawClock(UTC, now); } function drawClock(UTC, now) { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius, UTC, now); }

getTimezoneOffset()-menetelmä

Metodi getTimezoneOffset() palauttaa eron (minuutteina) paikallisen ajan ja UTC-ajan välillä:

Esimerkki

let diff = d.getTimezoneOffset();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The getTimezoneOffset() Method</h2>

<p>The time zone difference in minutes is:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getTimezoneOffset();
</script>

</body>
</html>

Täydellinen JavaScript-päivämäärä

Täydellisen päivämääräviitteen löydät osoitteestamme:

Täydellinen JavaScript-päivämäärä.

Viite sisältää kuvauksia ja esimerkkejä kaikista Date-ominaisuuksista ja menetelmiä.