JavaScripの日付・時間取得の方法6つ｜メソッドの使い方も紹介

Javascript
プログラミング言語

公開日時: 2020-06-04 　更新日時: 2022-06-13

この記事でわかること

システム エンジニア: JavaScriptでの日付の処理は、どのように行うのでしょうか？

プロジェクト マネージャー: フォーマットは存在しないので、詳しい手順をご紹介していきましょう。

JavaScriptで日付・時間取得を行うには

この記事ではJavaScriptでの日付・時刻処理の方法である、Dateオブジェクトについて解説します。フォーマット通りに日付や時刻を取り出すにはどうすればいいのか解説していきます。

Dateオブジェクト

new Date()

1	new Date()

と、すると現在の日付・時刻が取得できます。

const date = new Date();

1	const date = new Date();

で、dateに現在の日付・時刻が代入されます。
JavaScriptでは、日付も時刻も、Dateオブジェクトで一元管理します。

フォーマットは存在しない

実は、JavaScriptでは日付・時刻処理のフォーマットは存在しません。

例えば、Pythonで日付・時刻処理を行うdatetimeオブジェクトから現在の日付・時刻を取り出す方法は

import datetime
now = datetime.datetime.now()
now.strftime(“%Y/%m/%d %H:%M:%S”)

import datetime

now = datetime.datetime.now()

now.strftime(“%Y/%m/%d %H:%M:%S”)

ですが、この%Yや%Hなどの「フォーマット文字列」はJavaScriptには存在しません。

フォーマットが存在しない代わりに、どうしたらよいのでしょうか？

それは、一つひとつメソッドを使って情報を取り出すのです。以下では、その取り出し方を解説していきます。見方を変えれば一つひとつのメソッドが、JavaScriptでの日付・時刻処理のフォーマットと言えるかもしれません。

JavaScriptにおける日付・時間取得方法6つ

JavaScriptでは

new Date()

1	new Date()

に対して様々なメソッドを使うことで、それぞれ異なる結果の時間取得をすることができます。
以下に6つの時間取得の方法を記載しますので、覚えていきましょう。

1：西暦を取得する

西暦を取得するには

getFullYear()

1	getFullYear()

を使います。4桁の数値で返ってきます。

const date = new Date();
const year = date.getFullYear();

const date = new Date();

const year = date.getFullYear();

以上がJavaScriptで西暦を取得するフォーマットです。

2：日付を取得する

月を取得するには

getMonth()

1	getMonth()

を使います。ただし数値で返ってきます。

数値と対応する月は以下です。
0→1月
1→2月
2→3月
3→4月
4→5月
5→6月
6→7月
7→8月
8→9月
9→10月
10→11月
11→12月

日を取得するには

getDate()

getDate()

を、使います。数値で返ってきます。

const date = new Date();
const month = date.getMonth() + 1; //月が代入される
const day = date.getDate()

const date = new Date();

const month = date.getMonth() + 1; //月が代入される

const day = date.getDate()

以上がJavaScriptで日付を取得するフォーマットです。

3：時刻を取得する

時間を取得するには

getHours()

1	getHours()

を使います。0～23です。24時は0時になるので注意しましょう。

分を取得するには

getMiniutes()

1	getMiniutes()

を使います。

秒を取得するには

getSeconds()

1	getSeconds()

を使います。

ミリ秒を取得するには

getMilliseconds()

1	getMilliseconds()

を使います。

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

const date = new Date();

const hour = date.getHours();

const minutes = date.getMinutes();

const seconds = date.getSeconds();

const milliseconds = date.getMilliseconds();

以上がJavaScriptで時刻を取得するフォーマットです。

4：曜日を取得する

曜日を取得するには

getDay()

getDay()

を使います。

返ってくる数値と曜日の関係は
0→日曜日
1→月曜日
2→火曜日
3→水曜日
4→木曜日
5→金曜日
6→土曜日
です。

実際には、配列を用意して表示するのがいいでしょう。例えば、

const date = new Date();
const day = date.getDay();
const dlist = [“日”,”月”,”火”,”水”,”木”,”金”,”土”];
const result = dlist[day]

const date = new Date();

const day = date.getDay();

const dlist = [“日”,”月”,”火”,”水”,”木”,”金”,”土”];

const result = dlist[day]

とすれば、resultに日～土の文字列が代入されます。

以上がJavaScriptで曜日を取得するフォーマットです。

5：日本式表記の日付・時刻を取得する

以上の方法で日付と時刻は取得できるのですが、もっとシンプルに取得する方法があります。

それが

toLocaleString()

1	toLocaleString()

です。

そのブラウザの環境に合わせて、フォーマット化された日付・時刻を返します。

const date = new Date();
const locale = date.toLocaleString();

1 2	const date = new Date(); const locale = date.toLocaleString();

とすると、例えば、日本語環境なら
2020/5/22 8:14:00
英語環境なら
5/22/2020 8:14:00 AM
という文字列が取得できます。

日付だけを取得したいときは

toLocaleDateString()

1	toLocaleDateString()

時刻だけを取得したいときは

toLocaleTimeString()

1	toLocaleTimeString()

を使います。

6：世界標準時（UTC）を取得する

世界標準時の時間取得をしたいときは、

toUTCString()

1	toUTCString()

を使います。

new Date();

1	new Date();

は、使用端末のタイムゾーンで処理されるため、UTCの時間取得するには、上記の特別なメソッドを使う必要があります。

const date = new Date();
const locale = date.toUTCString();

1 2	const date = new Date(); const locale = date.toUTCString();

こうすることで、世界標準時（UTC）を取得することができます。

Dateインスタンスに値を設定する方法

今まで

new Date();

1	new Date();

と記載していましたが、これを使用すると端末の現時刻になってしまいます。

インスタンスに値を設定することで自由な時刻のDataインスタンスを作ることができます。

コンストラクタで設定する

こちらは以下のような方法があります。

const date1 = new Date(“2020/05/22 08:21:00”);
const date2 = new Date(“Fri May 22 2020 08:21:00”);
const date3 = new Date(2020,4,22,8,21,00);

const date1 = new Date(“2020/05/22 08:21:00”);

const date2 = new Date(“Fri May 22 2020 08:21:00”);

const date3 = new Date(2020,4,22,8,21,00);

toLocaleString()

1	toLocaleString()

で返ってくる書式で設定する方式と、それぞれ数値で指定する方式です。数値で指定するときは、月は1引いてください。5月は4になります。

メソッドで設定する

以下のメソッドでも設定できます。

setFullYear(西暦)
setMonth(月)　※0～11
setDate(日)
setHours(時) ※0～23
setMinutes(分)
setSeconds(秒)
setMilliseconds(ミリ秒)

setFullYear(西暦)

setMonth(月)　※0～11

setDate(日)

setHours(時) ※0～23

setMinutes(分)

setSeconds(秒)

setMilliseconds(ミリ秒)

Dateオブジェクトにおける主要メソッドの使い方3つ

Dateオブジェクトは様々なメソッドが用意されています。その中でも以下3つの主要なメソッドを紹介します。

「表示する」「経過時間を取得する」「指定の日付にする」の3つを使いこなして日付取得や時間取得を行いましょう。

1：日付をtoString()で文字列に変換

時間取得のDateオブジェクトを表す文字列にするメソッドがあります。
それが

toString()

1	toString()

です。

const date = new Date('August 19, 1975 23:15:30');
console.log(date.toString());

1 2	const date = new Date('August 19, 1975 23:15:30'); console.log(date.toString());

これを実行することで、「Tue Aug 19 1975 23:15:30 GMT+0900 (日本標準時)」となります。

ただ日付がテキスト値で出力されるときや、文字列に強制変換されるときは、記述しなくても自動的に呼び出されます。

const date = new Date('August 19, 1975 23:15:30');
console.log(date.toString());

1 2	const date = new Date('August 19, 1975 23:15:30'); console.log(date.toString());

と、

const date = new Date('August 19, 1975 23:15:30');
console.log(date);

1 2	const date = new Date('August 19, 1975 23:15:30'); console.log(date);

同じ挙動になるということです。

2：経過ミリ秒をgetTime()で取得

「そのDateは数値にしたらいくつなのか？」これを取得するためのメソッドがあります。
それが

getTime()

getTime()

です。

数値としては「1970 年 1 月 1 日 00:00:00」から経過した「ミリ秒」が返ってきます。

var date = new Date(2021, 0 , 1);
console.log(date.getTime());

1 2	var date = new Date(2021, 0 , 1); console.log(date.getTime());

3：文字列をparse()で日付に変換

日付用として用意した文字列を実際にDate型にするにはどうしたらいいでしょう。それを解決するためのメソッドがあります。

Date.parse()

1	Date.parse()

です。

これを使用することで指定した文字列を日付として認識し、ミリ秒を返します。
これにミリ秒をDate型にするメソッド「setTime」を使って日付に変換することができます。

var date = new Date();
date.setTime(Date.parse("2021-01-01"));
console.log(date);

var date = new Date();

date.setTime(Date.parse("2021-01-01"));

console.log(date);

日付・時刻を加算・減算する方法

これは簡単にできます。

たとえば60日後を知りたいとき

const date = new Date();
date.setDate(date.getDate() + 60);

1 2	const date = new Date(); date.setDate(date.getDate() + 60);

とすれば良いだけです。

月をまたぐのではないか、と思うかもしれませんが、それはDateオブジェクトが内部的にきちんと処理してくれます。細かいことを気にかける必要はありません。

タイムスタンプ値を取得する方法

コンピュータの世界では「タイムスタンプ」というものがあります。これは協定世界時での1970年1月1日0時0分0秒から現在までの経過時間のことです。単位はミリ秒です。

現在時刻のタイムスタンプ値を取得するには

now()

now()

を使います。

const num = Date.now();

1	const num = Date.now();

でnumにタイムスタンプ値が代入されます。

ある日付・時刻のタイムスタンプ値を得るには

parse()

parse()

を使います。

const num = Date.parse(“2020/05/22”);

1	const num = Date.parse(“2020/05/22”);

などと使います。

日付・時刻の差分を計算する方法

JavaScriptのDate型には差分を計算するメソッドはありません。しかし今までに記載している機能を使いこなすことで差分取得をすることができます。

それは差分計算するAとBの「指定の時期から何ミリ秒経過したか」を取得して、その差を計算です。

実際にやってみましょう。

var date1 = new Date(2020,1,1);
var date2 = new Date(2020,3,1);
var diff = date2.getTime() - date1.getTime();

var date1 = new Date(2020,1,1);

var date2 = new Date(2020,3,1);

var diff = date2.getTime() - date1.getTime();

これでミリ秒の差分が取得できました。
これを欲しい単位にするために計算しましょう。

console.log(diff / 1000); //秒
console.log(diff / 1000 / 60); //分
console.log(diff / 1000 / 60 / 60); //時間
console.log(diff / 1000 / 60 / 60 / 24 ); //日

console.log(diff / 1000); //秒

console.log(diff / 1000 / 60); //分

console.log(diff / 1000 / 60 / 60); //時間

console.log(diff / 1000 / 60 / 60 / 24 ); //日

日付表示に「Datepicker」を使う方法

システムで日付を使用するには「カレンダーUI」が必要不可欠です。これはjQueryを使えば簡単に用意することができます。

まずjQueryUIの準備をします。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

1 2	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

これでjQueryUIが使えるようになりました。

datepickerはテキストボックスのエレメントに

datepicker()

1	datepicker()

メソッドを設定すれば使うことができます。

<input type="text" id="datepicker">

1	<input type="text" id="datepicker">

このテキストボックスに対して、メソッドを設定します。

$('#datepicker').datepicker();

1	$('#datepicker').datepicker();

これでテキストボックスにdatepickerのカレンダーUIが搭載されました。

他にもオプションで「カレンダーの最初の曜日を変える」や「日付フォーマットを設定」することができますので、色々試してみてください。

Dateオブジェクトを比較する方法

プログラムする上で、Dateオブジェクトのどちらが大きい（未来の日付）のか、など比較することもあるでしょう。Dateオブジェクトを比較する方法が2種類ありますので、そちらを紹介します。

比較演算子を使用する日付の比較

Date型は直接比較演算子で比較をすることができます。

var date1 = new Date("2021-01-01");
var date2 = new Date("2021-01-02");
console.log(date1 < date2);

var date1 = new Date("2021-01-01");

var date2 = new Date("2021-01-02");

console.log(date1 < date2);

結果「true」となり、比較ができていることがわかります。

経過ミリ秒を使用する日付の比較

getTime()

getTime()

で経過ミリ秒を取得して、数値として比較することもできます。

var date1 = new Date("2021-01-01");
var date2 = new Date("2021-01-02");
console.log(date1.getTime());
console.log(date2.getTime());
console.log(date1.getTime() < date2.getTime());

var date1 = new Date("2021-01-01");

var date2 = new Date("2021-01-02");

console.log(date1.getTime());

console.log(date2.getTime());

console.log(date1.getTime() < date2.getTime());

結果「true」となり、比較ができています。

システム エンジニア: 難しそうなイメージがありましたが、意外と簡単にできるのですね。

プロジェクト マネージャー: そうですね。難しい部分はDateオブジェクトがになってくれるので、上手に使いこなしていきましょう！

JavaScriptにおける日付・時間取得方法を知ろう

以上、JavaScriptで日付・時刻を扱うDateオブジェクトについて解説してきました。

ややこしい部分もありますが、それでもDateオブジェクトが相当部分吸収してくれるので、簡単に扱えます。

Dateオブジェクトを使いこなして、日付・時刻処理をやっていきましょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScripの日付・時間取得の方法6つ｜メソッドの使い方も紹介

JavaScriptで日付・時間取得を行うには

Dateオブジェクト

フォーマットは存在しない

JavaScriptにおける日付・時間取得方法6つ

1：西暦を取得する

2：日付を取得する

3：時刻を取得する

4：曜日を取得する

5：日本式表記の日付・時刻を取得する

6：世界標準時（UTC）を取得する

Dateインスタンスに値を設定する方法

コンストラクタで設定する

メソッドで設定する

Dateオブジェクトにおける主要メソッドの使い方3つ

1：日付をtoString()で文字列に変換

2：経過ミリ秒をgetTime()で取得

3：文字列をparse()で日付に変換

日付・時刻を加算・減算する方法

タイムスタンプ値を取得する方法

日付・時刻の差分を計算する方法

日付表示に「Datepicker」を使う方法

Dateオブジェクトを比較する方法

比較演算子を使用する日付の比較

経過ミリ秒を使用する日付の比較

JavaScriptにおける日付・時間取得方法を知ろう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScripの日付・時間取得の方法6つ｜メソッドの使い方も紹介

JavaScriptで日付・時間取得を行うには

Dateオブジェクト

フォーマットは存在しない

JavaScriptにおける日付・時間取得方法6つ

1：西暦を取得する

2：日付を取得する

3：時刻を取得する

4：曜日を取得する

5：日本式表記の日付・時刻を取得する

6：世界標準時（UTC）を取得する

Dateインスタンスに値を設定する方法

コンストラクタで設定する

メソッドで設定する

Dateオブジェクトにおける主要メソッドの使い方3つ

1：日付をtoString()で文字列に変換

2：経過ミリ秒をgetTime()で取得

3：文字列をparse()で日付に変換

日付・時刻を加算・減算する方法

タイムスタンプ値を取得する方法

日付・時刻の差分を計算する方法

日付表示に「Datepicker」を使う方法

Dateオブジェクトを比較する方法

比較演算子を使用する日付の比較

経過ミリ秒を使用する日付の比較

JavaScriptにおける日付・時間取得方法を知ろう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryでCSSのスタイルを変更する方法

JavaScriptでのreplaceを使った文字列置換方法を紹介｜replaceでの文字列置換方法を学ぼう！

jQueryのtoggleの使い方を解説！アニメーションするWebページを作ろう

jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう

JavaScriptでのsetTimeoutの使い方｜基本的な使い方からsetIntervalとの違いなどを紹介