JavaScript-päivämääräobjektit


Sisällysluettelo

    Näytä sisällysluettelo


JavaScript Päivämääräobjektit antavat meille mahdollisuuden työskennellä päivämäärien kanssa:

Vuosi:

Esimerkki kuluvan vuoden saamisesta Javascriptiin:

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

Kuukausi:

Esimerkki kuluvan kuukauden hankkimisesta Javascriptissä:

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

Päivä:

Esimerkki nykyisen päivän hakemisesta Javascriptissä:

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

Aukioloajat:

Esimerkki nykyisen tunnin saamisesta Javascriptissä:

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

Pöytäkirja:

Esimerkki nykyisen minuutin saamisesta Javascriptissä:

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

Sekunnit:

Esimerkki nykyisen toisen hankkimisesta Javascriptissä:

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

Esimerkkejä

const d = new Date();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>new Date() without arguments, creates a 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>
const d = new Date("2022-03-25");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

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

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

</body>
</html>

Huomautus

Päivämääräobjektit ovat staattisia. "Kello" ei "käy".

Tietokoneen kello tikittää, päivämääräobjektit eivät.


JavaScript-päivämäärätulostus

Oletusarvoisesti JavaScript käyttää selaimen aikavyöhykettä ja näyttää päivämäärän kokotekstimerkkijonona:

Myöhemmin tässä opetusohjelmassa opit paljon lisää päivämäärien näyttämisestä.


Päivämääräobjektien luominen

Päivämääräobjektit luodaan käyttämällä uusi Date()-konstruktori.

On 9 tapaa luoda uusi päivämääräobjekti:

new Date()
new Date(date string)

new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)

new Date(milliseconds)

JavaScript new Date()

new Date() luo päivämääräobjektin, jossa on nykyinen päivämäärä ja aika:

Esimerkki

const d = 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>

new Date(päivämäärämerkkijono)

uusi päivämäärä(päivämäärämerkkijono) luo päivämääräobjektin päivämäärämerkkijonosta:

Esimerkkejä

const d = new Date("October 13, 2014 11:13:00");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>A date object can be created with a specified date and time:</p>
<p id="demo"></p>

<script>
const d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>
const d = new Date("2022-03-25");

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

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

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

</body>
</html>

Päivämäärämerkkijonomuodot kuvataan seuraavassa luvussa.


uusi päivämäärä(vuosi, kuukausi, ...)

uusi päivämäärä(vuosi, kuukausi, ...) luo päivämääräobjektin, jolla on määritetty päivämäärä ja aika.

7 numeroa määrittävät vuoden, kuukauden, päivän, tunnin, minuutin, sekunnin ja millisekunnin (tässä järjestyksessä):

Esimerkki

const d = new Date(2018, 11, 24, 10, 33, 30, 0);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>Using new Date(7 numbers), creates a new date object with the specified date and time:</p>

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

<script>
const d = new Date(2018, 11, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Huomautus

JavaScript laskee kuukausia välillä 0 - 11:

Tammikuu=0.

Joulukuu=11..

Yli 11 kuukauden määrittäminen ei aiheuta virhettä, vaan lisää ylivuodon seuraavaan vuoteen:

Määritetään:

const d = new Date(2018, 15, 24, 10, 33, 30);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript new Date()</h1>

<p>JavaScript counts months from 0 to 11.</p>
<p>Specifying a month higher than 11, will not result in an error but add the overflow to the next year:</p>

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

<script>
const d = new Date(2018, 15, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

On sama kuin:

const d = new Date(2019, 3, 24, 10, 33, 30);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript new Date()</h1>

<p>JavaScript counts months from 0 to 11.</p>

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

<script>
const d = new Date(2019, 3, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Maksimipäivää suuremman päivän määrittäminen ei aiheuta virhettä, vaan lisää ylivuoto seuraavaan kuukauteen:

Määritetään:

const d = new Date(2018, 5, 35, 10, 33, 30);

On sama kuin:

const d = new Date(2018, 6, 5, 10, 33, 30);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>JavaScript counts months from 0 to 11.</p>
<p>Specifying a day higher than max, will not result in an error but add the overflow to the next month:</p>

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

<script>
const d = new Date(2018, 05, 35, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Käytä 6, 4, 3 tai 2 numeroa

6 numeroa määrittävät vuoden, kuukauden, päivän, tunnin, minuutin, sekunnin:

Esimerkki

const d = new Date(2018, 11, 24, 10, 33, 30);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>6 numbers specify year, month, day, hour, minute and second:</p>

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

<script>
const d = new Date(2018, 11, 24, 10, 33, 30);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

5 numeroa määrittävät vuoden, kuukauden, päivän, tunnin ja minuutin:

Esimerkki

const d = new Date(2018, 11, 24, 10, 33);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>5 numbers specify year, month, day, hour, and minute:</p>

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

<script>
const d = new Date(2018, 11, 24, 10, 33);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

4 numeroa määrittelevät vuoden, kuukauden, päivän ja tunnin:

Esimerkki

const d = new Date(2018, 11, 24, 10);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>4 numbers specify year, month, day, and hour:</p>

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

<script>
const d = new Date(2018, 11, 24, 10);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

3 numeroa osoittavat vuoden, kuukauden ja päivän:

Esimerkki

const d = new Date(2018, 11, 24);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>3 numbers specify year, month, and day:</p>

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

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

</body>
</html>

2 numeroa osoittavat vuoden ja kuukauden:

Esimerkki

const d = new Date(2018, 11);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>2 numbers specify year and  month:</p>

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

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

</body>
</html>

Kuukautta ei voi jättää väliin. Jos annat vain yhden parametrin, sitä käsitellään millisekunteina.

Esimerkki

const d = new Date(2018);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>One parameter will be interpreted as new Date(milliseconds).</p>

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

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

</body>
</html>

Edellinen vuosisata

Yksi- ja kaksinumeroiset vuodet tulkitaan luvuksi 19xx:

Esimerkki

const d = new Date(99, 11, 24);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>Two digit years will be interpreted as 19xx:</p>

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

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

</body>
</html>

Esimerkki

const d = new Date(9, 11, 24);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>One digit years will be interpreted as 19xx:</p>

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

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

</body>
</html>

JavaScript tallentaa päivämäärät millisekunteina

JavaScript tallentaa päivämäärät millisekunteina 1. tammikuuta 1970 lähtien.

Nollaaika on 1. tammikuuta 1970 00:00:00 UTC.

Yksi päivä (24 tuntia) on 86 400 000 millisekuntia.

Nyt on aika:

millisekuntia 1. tammikuuta 1970 jälkeen


new Date(millisekuntia)

uusi päivämäärä (millisekuntia) luo uuden päivämääräobjektin muodossa millisekuntia plus nolla aika:

Esimerkkejä

1. tammikuuta 1970 plus 100 000 000 000 millisekuntia on:

const d = new Date(100000000000);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>100000000000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

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

</body>
</html>

1. tammikuuta 1970 miinus 100 000 000 000 millisekuntia on:

const d = new Date(-100000000000);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>-100000000000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

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

</body>
</html>

1. tammikuuta 1970 plus 24 tuntia on:

const d = new Date(24 * 60 * 60 * 1000);
// or
const d = new Date(86400000);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>86400000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

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

<p>One day (24 hours) is 86,400,000 milliseconds.</p>

</body>
</html>

1. tammikuuta 1970 plus 0 millisekuntia on:

const d = new Date(0);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>0 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

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

</body>
</html>


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

Kun päivämääräobjekti luodaan, voit käyttää useita menetelmiä se.

Päivämäärämenetelmien avulla voit saada ja asettaa vuoden, kuukauden, päivän, tunnin, minuutti, sekunti ja millisekunti päivämääräobjekteista joko paikallista aikaa tai UTC-aikaa käyttäen (yleinen tai GMT) aika.

Päivämäärämenetelmät ja aikavyöhykkeet käsitellään seuraavissa luvuissa.


Päivämäärät näytetään

JavaScript tulostaa (oletuksena) päivämäärät toString()-menetelmällä. Tämä on merkkijonoesitys päivämäärästä, mukaan lukien aikavyöhyke. Muoto on määritetty ECMAScript-spesifikaatiossa:

Esimerkki

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>new Date() without arguments, creates a 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>

Kun näytät päivämääräobjektin HTML-muodossa, se muunnetaan automaattisesti muotoon a merkkijono toString()-menetelmällä.

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

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

<p>Convert a date to a string:</p>
<p id="demo"></p>

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

</body>
</html>

toDateString()-menetelmä muuntaa päivämäärän luettavammaksi muoto:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toDateString() Method</h2>
<p>Convert a date to a date string:</p>

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

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

</body>
</html>

Menetelmä toUTCString() muuntaa päivämäärän merkkijonoksi UTC-standardin mukaisesti:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toUTCString() Method</h2>
<p>Convert a date to a string using the UTC standard:</p>

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

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

</body>
</html>

Menetelmä toISOString() muuntaa päivämäärän merkkijonoksi ISO-standardin avulla:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

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

<p>Convert a date to a string using the ISO standard:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
</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ä.