JavaScriptの日付フォーマット変換ライブラリdateformatについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptの日付フォーマット変換ライブラリdateformatについて解説しています。dataformatの導入方法、基本の使い方、実際の日付フォーマット作成の例を説明します。dataformatを利用した日付の扱い方を学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptの日付フォーマット変換ライブラリdateformatについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

日付フォーマット変換ライブラリdateformatについて詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

dateformatとは

無料で提供されている「日付フォーマット変換ライブラリ」で、ここからダウンロードできます。JavaScriptのデフォルトのライブラリ内には日付フォーマットに関するライブラリが無いので、このような外部のライブラリを利用する必要があります。

dataformat以外にもjQueryなどにも日付フォーマット用のライブラリは存在しますので、jQueryを利用する場合はどちらで確認してみるのも良いかと思います。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

dataformatの使い方

まずは、ライブラリを読み込む設定をします

<script type="text/javascript" src="./js/dateformat.js"></script>

続いて、dataformatをインスタンスを作成します。この時に、表示したい日付フォーマットを指定します。

var Format = new DateFormat("yyyy/MM/dd HH:mm:ss SSS");

最後に、インスタンスを利用して、日付を指定します。

var strDate = Format.format(new Date());

結果:2020/07/19 11:39:49 567

となります。また、文字列から日付データに変換することも可能です。

var Date = Format.parse("2020/07/19 11:39:49 567");

 

dataformatを利用して日付フォーマットを作成してみよう

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title>dateformat JavaScript</title>

  <script type="text/javascript" src="./js/dateformat.js"></script>

</head>

<body>

  <div>

    <p>YY年MM月DD日 hh時㎜分</p>

    <input typy="text" id="strdate" size="30">

    <input typy="text" id="date" size="50">

  </div>

    //パターン01

    var Format01 = new DateFormat("yyyy/MM/dd HH:mm:ss SSS");

    //パターン02

    var Format02 = new DateFormat("yyyyMMdd");

    //現在時刻をフォーマットに従った日付フォーマットに

    var strdate = Format01.format(new Date());

    //フォーマットに従った日付文字列をDATE型に

var date = Format02.parse("20200720");

    document.getElementById("strdate").value = strdate;

    document.getElementById("date").value = date;

  </script>

  </body>

</html>

 

まとめ

日付を扱うシーンは沢山あるかと思います。今日日付を表示したり、入力された日付を日付型にして引き渡すなどですね。そんな時は、今回のdataformatを利用してみてください。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。