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

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

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

    目次

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

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

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

    サンプルコードの「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();
    //現在の日付をDatオブジェクトの標準フォーマットでブラウザーに表示する
    var pelem011 = document.getElementById("date011");
    pelem011.innerHTML = rightNow;
    }
    </script>
    </body>
    </html>

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

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

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

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

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

    ▲ページトップへ戻る

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

    次に、日付オブジェクトの「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 format_date = rightNow.toUTCString();

    //協定世界時(UTC)フォーマットした日付をブラウザーに表示する
    var pelem012 = document.getElementById("date012");
    pelem012.innerHTML = format_date;
    }
    </script>
    </body>
    </html>

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

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

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

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

    ▲ページトップへ戻る

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

    日付オブジェクトから「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 format_date = rightNow.toISOString();

    //ISOフォーマットした日付をブラウザーに表示する
    var pelem013 = document.getElementById("date013");
    pelem013.innerHTML = format_date;
    }
    </script>
    </body>
    </html>

    new Date()」でオブジェクト変数の「rightNow」を生成します。
    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. 日付オブジェクトの日付部分の文字列を取得する - toDateString() メソッド -

    日付オブジェクトから日付部分を取得する「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 format_date = rightNow.toDateString();

    //日付部分のみをブラウザーに表示する
    var pelem014 = document.getElementById("date014");
    pelem014.innerHTML = format_date;
    }
    </script>
    </body>
    </html>

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

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

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

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

    ▲ページトップへ戻る

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

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

    日付オブジェクトの「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 format_date = rightNow.toLocaleString();

    //日付・時刻をブラウザーに表示する
    var pelem021 = document.getElementById("date021");
    pelem021.innerHTML = format_date;
    }
    </script>
    </body>
    </html>

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

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

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

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

    ▲ページトップへ戻る

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

    日付オブジェクトから東京標準時の日付部分のみを取得する「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 format_date = rightNow.toLocaleDateString();

    //東京標準時の日付部分のみをブラウザーに表示する
    var pelem022 = document.getElementById("date022");
    pelem022.innerHTML = format_date;
    }
    </script>
    </body>
    </html>

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

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

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

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

    ▲ページトップへ戻る

    2.3. 東京標準時の時刻を取得する

    日付オブジェクトを作成して、東京標準時の時刻部分のみを取得する「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 format_date = rightNow.toLocaleTimeString();

    //時刻部分のみをブラウザーに表示する
    var pelem023 = document.getElementById("date023");
    pelem023.innerHTML = format_date;
    }
    </script>
    </body>
    </html>

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

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

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

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

    ▲ページトップへ戻る

    3. JavaScriptライブラリを使って日付をフォーマットする方法

    3.1. YYYY/MM/DDフォーマット

    JavaScriptのライブラリ「date-fns」を使って日付をフォーマットしてみましょう。

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

    ●format_date031.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    <script src="http://cdn.date-fns.org/v1.9.0/date_fns.min.js"></script>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックすると日時を表示します。</p>
    <button onclick="dateFormatJformat()">日付を表示</button>
    <p id="date031">ここにYYYY/MM/DD形式の日付が表示されます。</p>
    <script>
    var format = dateFns.format
    function dateFormatJ031(){
    //日付オブジェクトの作成(現在の日付・時刻を設定)
    var rightNow = new Date();
    //日付をYYYY/MM/DDフォーマットにする
    var format_date = format(rightNow, 'YYYY/MM/DD');
    //日付部分をブラウザーに表示する
    var pelem031 = document.getElementById("date031");
    pelem031.innerHTML = format_date;
    }
    </script>
    </body>
    </html>

    「date-fns」ライブラリを指定します。

    <script src="http://cdn.date-fns.org/v1.9.0/date_fns.min.js"></script>

    「date-fns」で使用できるフォーマットの種類はたくさんありますが、本日の日付を「YYYY/MM/DDフォーマット」に変換してみましょう。日付フォーマットの一覧は「https://date-fns.org/v1.9.0/docs/format」で確認できます。

    サンプルコードでは、formatメソッドの引数に「日付」と「フォーマット文字列」を指定し、ボタンをクリックすると本日の日付が「YYYY/MM/DD」で表示されます。

    ボタンをクリックして、本日の日付が「YYYY/MM/DD」で表示されるか確認して下さい。

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

    ここにYYYY/MM/DD形式の日付が表示されます。

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

    ▲ページトップへ戻る

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

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

    おすすめ記事

  • OCTPASS

    ピックアップ

    正社員

    【PHP】サーバーサイドエンジニア|アドテクマーケティング★自社ツールの開発

    年収 :600万円〜

    ◆サーバーサイドエンジニアとして自社ツールの開発を担当 ◆最先端のマーケティングスキルも身につける...

    株式会社 ピアラ

    正社員

    【Java/PHP】システム開発エンジニア|企業グループIT部門◎100%自社内開発★未経験

    年収 :250万円〜350万円

    ◆700名規模グループ内のITシステムの開発や保守業務 ◆自社内開発100%!じっくりと業務に取り組める ◆...

    株式会社イノベーションネクスト

    正社員

    【LAMP】システムエンジニア|100%自社内開発★服装自由・フレックス◎独学可

    年収 :300万円〜350万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Java】システムエンジニア|100%自社内開発★在宅導入/時短OK◎働くママさん歓迎

    年収 :350万円〜600万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Python】開発エンジニア|自社ECサイト★マンガ×IT少数精鋭のベンチャー◎独学可

    ◆月間10億PVのマンガサービスを支えるPythonエンジニア ◆マンガに興味ある方!はじめはPython勉強意欲...

    株式会社TORICO