JavaScriptでの日付や時間を取り扱う方法

✏️️ 2019/08/17 👍️2019/08/17 🔗

JavaScriptdでの日付や時間の取り扱いについて纏めました。

西暦を取得

西暦はDateオブジェクトのgetFullYear()メソッドで取得することができます。

const date = new Date();
const year =  date.getFullYear();
console.log(year);
2019

日付を取得

getMonth()getDate()メソッドで取得することができます。月は0が1月なので+ 1 します。

const date = new Date();
const month =  date.getMonth() + 1;
const day =  date.getDate();
console.log(`${month}${day}日`);
817

時刻を取得

西暦はDateオブジェクトのgetFullYear()メソッドで取得することができます。

getHours(), getMinutes(), getSeconds(), getMilliseconds()メソッドを利用します。

const date = new Date();
const hour =  date.getHours();
const minutes =  date.getMinutes();
const seconds =  date.getSeconds();
const millisecons = date.getMilliseconds();

console.log(`${hour}${minutes}${seconds}${millisecons}ミリ秒`);
19454825ミリ秒

A.M. P.M. にする場合

const date = new Date();
const hour = date.getHour();

let meridian;
let hour2;

if (hour < 12) {
  meridian = 'A.M.';
  hour2 = hour;
} else {
  meridiem = 'P.M.'
  hour2 = hour - 12;
}

console.log(`${hour2} ${meridiem}`);
7 P.M.

曜日を取得する

西暦はDateオブジェクトのgetDay()メソッドで取得することができます。
値が0のとき日曜日です。

const date = new Date();
const day = date.getDay();
const dayList = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
console.log(`Today is ${dayList[day]}.`)
Today is Saturday.

ローカライズされた時刻表示(文字列)を取得したいとき

toLocaleString(), toLocaleDateString(), toLocaleTimeString()で取得することができます。

const date = new Date();
const locale = date.toLocaleString(); // "8/17/2019, 8:26:31 PM"
const localeDate = date.toLocaleDateString(); // "8/17/2019"
const localeTime = date.toLocaleTimeString(); // "8:26:31 PM"

タイムスタンプを取得

タイムスタンプとは1970年1月1日0時0分0秒から現在までの経過時間(単位はミリ秒)です。Date.parse()メソッドを利用すると取得できます。

Date.parse('8/17/2019, 8:26:31 PM'); // 1566041191000
Date.now(); // 1566042136158

日付、時刻の差分

msの差を求めて、それを日付に変換します。

const dateA = new Date('2019 / 7 / 22');
const dateB = new Date('2019 / 4 / 15');

const diffMsec = dateA.getTime() - dateB.getTime();
const diffDate = diffMsec / (24 * 60 * 60 * 1000); // 98

経過時間

<div id="time"></div>
const oldTime = Date.now();

setInterval(() => {
  const currentTime = Date.now();
  const diff = currentTime - oldTime;
  const sec = Math.floor(diff / 1000);

  document.querySelector("#time").innerHTML = `${sec}秒経過しました。`;
}, 1000);

カウントダウン

<div id="time"></div>
const totalTime = 10000;
const oldTime = Date.now();

const timerID = setInterval(() => {
  const currentTime = Date.now();
  const diff = currentTime - oldTime;

  const remainMSec = totalTime - diff;
  const remainSec = Math.ceil(remainMSec / 1000);

  let label = `残り${remainSec}秒です。`;

  if (remainSec <= 0) {
    clearInterval(timerID);
    label = "END";
  }

  document.querySelector("#time").innerHTML = label;
}, 1000);

参考

Akito
日本のスタートアップで主にRuby on Railsを使ってプロダクト開発をしています。