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

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

    公開日:2017年11月20日 最終更新日:2019年09月26日

    本コラムでは、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="https://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="https://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オブジェクトで日付の計算をしてみよう!

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    月額単価60万円〜90万円
    勤務地 神奈川県
    月額単価60万円〜70万円
    勤務地 東京都 港区
    月額単価70万円〜80万円
    勤務地 東京都 港区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Java】バックエンドエンジニア★Web教科書配信システムのアプリ開発 NEW

    月額単価 :60万円〜90万円

    小中学校で利用するWeb教科書配信システムの新規開発業務を担当して頂きます。

    フリーランス

    【React】フロントエンドエンジニア★eスポーツにおけるプラットフォーム開発

    月額単価 :60万円〜70万円

    eスポーツのプラットフォーム開発をしているスタートアップ企業にて、フロントエンド開発を担当して頂き...

    フリーランス

    【JavaScript】フロントエンドエンジニア★不動産Techサービスの開発

    月額単価 :70万円〜80万円

    同社はデジタルコンサルティング事業やインターネットメディア事業を展開しています。 今回は、同社が...

    フリーランス

    【HTML5/CSS3】マークアップエンジニア★商社・物流向け新規アプリ基盤構築

    同社は受託開発をメインとしています。 今回はAzure上で稼働するアプリケーションの開発に携わって頂き...