JavaScriptで日付をフォーマットする方法

    • このページをはてなブックマークに追加

    本コラムでは、JavaScriptのDateオブジェクトで取得した日付をフォーマット(format)する方法について解説します。
    JavaScriptで日付(Date)オブジェクトを作成する方法については、「JavaScript - Dateオブジェクトで日付や時刻を表示する方法」で説明していますのでご参考下さい。

    最終更新日:2018年1月9日

    目次

    1. 日付(Date)オブジェクトで年月日を表示する方法

    1.1. 日付(Date)オブジェクトの標準フォーマットで表示する - new Date() -

    まずは、JavaScript日付(Date)オブジェクトを作成して、日付をブラウザーで表示するコードを確認してみましょう。

    サンプルコードの「format_date011.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●format_date011.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFormatJ011()">日付を表示012/button>
    <p id="date011">ここに標準フォーマットの日付が表示されます。</p>
    
    <script>
    function dateFormatJ011(){
    	//日付オブジェクトの作成(現在の日付けを設定)
    	var rightNow = new Date();
    	//現在の日付をDateオブジェクトの標準フォーマットでブラウザーに表示する
    	var pelem011 = document.getElementById("date011");
    	pelem011.innerHTML = rightNow;
    }
    </script>
    </body>
    </html>
    

    17行目の「new Date()」で、現時点の日付オブジェクトを作成(生成)します。18行目の変数「pelem011」の初期化で、HTMLのid属性が「date011」の要素を設定し、19行目で、作成したJavaScriptの日付オブジェクト変数である「rightNow」変数を代入して現時点の日付をブラウザーに表示します。

    11行目の「buttonタグ」の「onclickイベント」でJavaScriptの「dateFormatJ011」関数が実行されます。以下にサンプルコードを埋め込みましたので、実際にボタンをクリックして動作を確認してみて下さい。

    ボタンをクリックすると日時を表示します。

    ここに標準フォーマットの日付が表示されます。

    ボタンをクリックするとクリックした日付が「2017年11月20日 19時57分10秒」の場合、「Mon Nov 20 2017 19:57:10 GMT+0900 (東京 (標準時))」と表示されます。

    ▲ページトップへ戻る

    1.2. 日付(Date)オブジェクトを協定世界時(UTC)の文字列で取得する - toUTCString() メソッド -

    次に、日付(Date)オブジェクトの「toUTCString メソッド」を使って、ローカルの時間ではなく、日付を「協定世界時(UTC)」のフォーマットで表示するコードを見てみましょう。

    「format_date012.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●format_date012.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFormatJ012()">日付を表示</button>
    <p id="date012">ここにUTCフォーマットの日付が表示されます。</p>
    
    <script>
    function dateFormatJ012(){
    	//日付オブジェクトの作成(現在の日付けを設定)
    	var rightNow = new Date();
    	//日付(Date)オブジェクトの協定世界時(UTC)フォーマットを取得する
    	var formate_date = rightNow.toUTCString();
    
    	//協定世界時(UTC)フォーマットした日付をブラウザーに表示する
    	var pelem012 = document.getElementById("date012");
    	pelem012.innerHTML = formate_date;
    }
    </script>
    </body>
    </html>
    

    17行目で作成した日付オブジェクトの「rightNow」変数を19行目の「toUTCString()」メソッドで、協定世界時(UTC:Coordinated Universal Time)のフォーマットに変換しています。以下サンプルコードのボタンをクリックして、UTCフォーマットの日付を表示してみましょう。

    ボタンをクリックすると日時を表示します。

    ここにUTCフォーマットの日付が表示されます。

    ボタンを押した日付が「2017年11月20日20時09分18秒」の場合、ブラウザーには東京標準時よりも9時間前の「Mon, 20 Nov 2017 11:09:18 GMT」が表示されます。

    ▲ページトップへ戻る

    1.3. 日付(Date)オブジェクトを ISOフォーマットの文字列で取得する - toISOString() メソッド -

    日付(Date)オブジェクトから「ISOフォーマット」の文字列を取得する「toISOString メソッド」をご紹介しましょう。

    「format_date013.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●format_date013.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFormatJ013()">日付を表示</button>
    <p id="date013">ここにISOフォーマットの日付が表示されます。</p>
    
    <script>
    function dateFormatJ013(){
    	//日付オブジェクトの作成(現在の日付けを設定)
    	var rightNow = new Date();
    	//現在の日付けをISOフォーマットの文字列で取得する
    	var formate_date = rightNow.toISOString();
    
    	//ISOフォーマットした日付をブラウザーに表示する
    	var pelem013 = document.getElementById("date013");
    	pelem013.innerHTML = formate_date;
    }
    </script>
    </body>
    </html>
    

    17行目の「new Date()」でオブジェクト変数の「rightNow」を生成します。
    19行目の「toISOString()」メソッドで、日付と時刻とISOフォーマットで取得する事ができます。「ISOフォーマット」は基本フォーマットと拡張フォーマットがあり、基本フォーマットは、「YYYYMMDDThhmmssZ」の表記になり、拡張フォーマットは、「YYYY-MM-DDThhmmssZ」の表記になり、年月日(YYYYMMDD)の間に「ハイフォン記号」が入ります。また、日付と時刻は「T」記号で区切られます。

    toISOString()」メソッドで取得するフォーマットは、「拡張フォーマット」になります。以下のサンプルコードのボタンをクリックして、日付と時刻の表記を確認して下さい。

    ボタンをクリックすると日時を表示します。

    ここにISOフォーマットの日付が表示されます。

    ボタンを押した日付が東京標準時の「2017年11月21日11時53分25秒」の場合、ブラウザーには東京標準時よりも9時間前の「2017-11-21T02:53:25.132Z」と表示されます。

    ▲ページトップへ戻る

    1.4. 日付(Date)オブジェクトの日付部分の文字列を取得する - toDateString() メソッド -

    日付(Date)オブジェクトから日付部分を取得する「toDateString メソッド」のサンプルコードを確認してみましょう。

    「format_date014.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●format_date014.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFormatJ014()">日付を表示</button>
    <p id="date014">ここに日付部分のみが表示されます。</p>
    
    <script>
    function dateFormatJ014(){
    	//日付オブジェクトの作成(現在の日付けを設定)
    	var rightNow = new Date();
    	//日付(Date)オブジェクトの日付部分を取得する
    	var formate_date = rightNow.toDateString();
    
    	//日付部分のみをブラウザーに表示する
    	var pelem014 = document.getElementById("date014");
    	pelem014.innerHTML = formate_date;
    }
    </script>
    </body>
    </html>
    

    作成した日付オブジェクト(rightNow)の「toDateString()」メソッドを使うと、日付・時刻表記の内、時刻部分を除いた「日付」部分のみを取得する事ができます。

    ボタンをクリックすると日時を表示します。

    ここに日付部分のみが表示されます。

    ボタンを押した日付が「2017年11月21日(火曜日)」の場合、ブラウザーには「Tue Nov 21 2017」と表示されます。

    ▲ページトップへ戻る

    2. 日付(Date)オブジェクトの日付を東京標準時フォーマットで取得する

    2.1. 東京標準時の日付・時刻を取得する - toLocaleString() メソッド -

    日付(Date)オブジェクトの「toDateString メソッド」や「toDateString メソッド」で取得する日時は、協定世界時(UTC)を基準とした文字列でしたが、ローカルタイムの東京標準時の日時を取得できるのが、「toLocaleStringメソッド」です。

    「format_date021.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●format_date021.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFormatJ021()">日付を表示</button>
    <p id="date021">ここに東京標準時の日付と時刻が表示されます。</p>
    
    <script>
    function dateFormatJ021(){
    	//日付オブジェクトの作成(現在の日付・時刻を設定)
    	var rightNow = new Date();
    	//日付(Date)オブジェクトの日付・時刻を取得する
    	var formate_date = rightNow.toLocaleString();
    
    	//日付・時刻をブラウザーに表示する
    	var pelem021 = document.getElementById("date021");
    	pelem021.innerHTML = formate_date;
    }
    </script>
    </body>
    </html>
    

    toLocaleString()」メソッドでは、JavaScriptでを表示している環境に合わせて、東京標準時にフォーマットされた日付と時刻を取得します。

    ボタンをクリックすると日時を表示します。

    ここに東京標準時の日付と時刻が表示されます。

    ボタンを押した日付と時刻が「2017年11月22 17時37分02秒」の場合、ブラウザーには「2017/11/22 17:37:02」と表示されます。

    ▲ページトップへ戻る

    2.2. 東京標準時の日付を取得する - toLocaleDateString() メソッド -

    日付(Date)オブジェクトから東京標準時の日付部分のみを取得する「toLocaleDateStringメソッド」のサンプルコードを確認してみましょう。

    「format_date022.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●format_date022.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFormatJ022()">日付を表示</button>
    <p id="date022">ここに東京標準時の日付部分のみが表示されます。</p>
    
    <script>
    function dateFormatJ022(){
    	//日付オブジェクトの作成(現在の日付・時刻を設定)
    	var rightNow = new Date();
    	//日付(Date)オブジェクトの日付部分を取得する
    	var formate_date = rightNow.toLocaleDateString();
    
    	//東京標準時の日付部分のみをブラウザーに表示する
    	var pelem022 = document.getElementById("date022");
    	pelem022.innerHTML = formate_date;
    }
    </script>
    </body>
    </html>
    

    toLocaleDateString()」メソッドでは、日付・時刻表記の内、時刻部分を除いた「日付」部分を東京標準時を基準として文字列に変換します。

    ボタンをクリックすると日時を表示します。

    ここに東京標準時の日付部分のみが表示されます。

    ボタンを押した日付の東京標準時が「2018年8月8日」の場合、ブラウザーには「2018/8/8」と表示されます。

    ▲ページトップへ戻る

    2.3. 東京標準時の時刻を取得する - toLocaleTimeString() メソッド -

    日付(Date)オブジェクトを作成して、東京標準時の時刻部分のみを取得する「toLocaleTimeStringメソッド」をご紹介しましょう。

    「format_date023.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●format_date023.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    
    <p023ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFormatJ023()">日付を表示</button>
    <p id="date023">ここに東京標準時の時刻部分のみが表示されます。</p>
    
    <script>
    function dateFormatJ023(){
    	//日付オブジェクトの作成(現在の日付・時刻を設定)
    	var rightNow = new Date();
    	//日付(Date)オブジェクトの東京標準時の時刻部分を取得する
    	var formate_date = rightNow.toLocaleTimeString();
    
    	//時刻部分のみをブラウザーに表示する
    	var pelem023 = document.getElementById("date023");
    	pelem023.innerHTML = formate_date;
    }
    </script>
    </body>
    </html>
    

    toLocaleTimeString()」メソッドを使うと、東京標準時の日付・時刻の内、日付を除く「時刻」部分のみを文字列に変換することができます。サンプルコードのボタンをクリックして、現在の時刻が表示されるか確認して下さい。

    ボタンをクリックすると日時を表示します。

    ここに東京標準時の時刻部分のみが表示されます。

    ボタンを押した東京標準時が「2017年11月24日(金曜日)の12時02分08秒」の場合、ブラウザーには日付を除いた時刻部分の「12:02:08」が表示されます。

    ▲ページトップへ戻る

    関連記事:JavaScript - Dateオブジェクトで日付や時刻を表示する方法
    関連記事:JavaScriptのDateオブジェクトで日付の計算をしてみよう!

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Java/DB】システムエンジニア★人事情報統合・移行システム開発 NEW

    銀行の人事情報と利用者情報の統合・移行システム開発を お任せします。 8月~10月までは基本設計フ...

    フリーランス

    【HTML/CSS/Javascript】フロントエンドエンジニア★自社サービス NEW

    ・フロント周りの設計/開発/テスト/運用 ・HTML5、CSS3、JavaScript を利用した開発 (モックアッ...

    フリーランス

    【PHP(CakePHP3)】システムエンジニア★メーカ基幹システム刷新

    月額単価 :60万円〜

    売上・購入・在庫管理システムを Webシステムへリプレースしていただきます。 ※プログラミング~単...

    フリーランス

    【Java(Spring)/jQuery/JUnit】システムエンジニア★予約システムリプレース

    月額単価 :70万円〜

    Salesforceで稼働しているアプリケーションを Javaへリプレースしていただきます。 ※詳細設計~プロ...

    フリーランス

    【PHP/Laravel】システムエンジニア★会員管理システム(バックオフィス)リプレース

    月額単価 :70万円〜

    会員管理システムのバックオフィスの リプレースをお任せします。