【初心者向け】JavaScriptで現在の日付を取得してHTMLに挿入する方法
2024-04-17
JavaScriptとHTMLを使って現在の日付をdd/mm/yyyy形式で入力欄に挿入する方法
必要なもの
- テキストエディタ (例：メモ帳、サクラエディタ、Visual Studio Code)
- Webブラウザ (例：Chrome、Firefox、Safari)
手順
-
HTMLファイルを作成する
以下のコードを
index.htmlという名前のファイルに保存します。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>現在の日付を取得</title> </head> <body> <input type="text" id="currentDate"> <script src="script.js"></script> </body> </html>このHTMLコードは、
currentDateというIDを持つ入力欄 (<input type="text">) を作成します。 -
JavaScriptファイルを作成する
const currentDateInput = document.getElementById('currentDate'); const today = new Date(); const dd = String(today.getDate()).padStart(2, '0'); const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0! const yyyy = today.getFullYear(); const formattedDate = dd + '/' + mm + '/' + yyyy; currentDateInput.value = formattedDate;このJavaScriptコードは、以下の処理を行います。
currentDateというIDを持つ入力欄を取得します。- 現在の日付を取得します。
- 日付をdd/mm/yyyy形式にフォーマットします。
- フォーマットされた日付を入力欄に設定します。
-
ファイルをブラウザで開く
説明
Date()コンストラクタは、現在の日付と時刻を表すDateオブジェクトを作成します。getDate(),getMonth(),getFullYear()メソッドは、それぞれ日付、月、年の数値を取得します。String()関数は、数値を文字列に変換します。padStart()メソッドは、文字列の先頭に指定した文字数を追加して、文字列の長さを指定の長さにします。getElementById()メソッドは、HTML要素をIDで取得します。valueプロパティは、入力欄の値を設定または取得します。
応用例
- フォームに自動的に日付を入力する
- ニュース記事やブログ記事に投稿日を表示する
- チャットメッセージにタイムスタンプを追加する
HTML (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>現在の日付を取得</title>
</head>
<body>
<input type="text" id="currentDate">
<script src="script.js"></script>
</body>
</html>
このHTMLコードは、以下の要素で構成されています。
<!DOCTYPE html>: HTML5ドキュメントであることを宣言します。<html lang="ja">: ルートHTML要素。lang属性で言語を日本語に指定します。<head>: メタデータなどを記述する要素。<meta charset="UTF-8">: 文字エンコーディングをUTF-8に設定します。<title>現在の日付を取得</title>: ブラウザのタイトルバーに表示されるタイトルを設定します。
<body>: Webページのコンテンツを記述する要素。<input type="text" id="currentDate">: 入力欄 (<input>) を定義します。type="text": テキスト入力欄であることを指定します。id="currentDate": 入力欄にcurrentDateというIDを設定します。
<script src="script.js"></script>: JavaScriptファイル (script.js) を読み込みます。
JavaScript (script.js)
const currentDateInput = document.getElementById('currentDate');
const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
const yyyy = today.getFullYear();
const formattedDate = dd + '/' + mm + '/' + yyyy;
currentDateInput.value = formattedDate;
- 入力欄を取得:
document.getElementById('currentDate')を使用して、currentDateというIDを持つ入力欄を取得します。 - 現在の日付を取得:
new Date()を使用して、現在の日付と時刻を表すDateオブジェクトを作成します。 - 日付をフォーマット: 以下の手順で、日付をdd/mm/yyyy形式にフォーマットします。
today.getDate(): 日付を取得します。padStart(2, '0'): 文字列の先頭に0を2文字追加して、2桁になるようにします。- 同様の処理で、月 (
today.getMonth() + 1) と年 (today.getFullYear()) を取得し、フォーマットします。 - 各日付コンポーネントを
/で連結して、formattedDate変数に格納します。
- 入力欄に値を設定:
currentDateInput.value = formattedDate;を使用して、フォーマットされた日付をcurrentDateというIDを持つ入力欄に設定します。
コードの改良
このサンプルコードは、基本的な動作のみを示しています。必要に応じて、以下の改良を検討することができます。
- エラー処理: 日付の取得やフォーマットに失敗した場合の処理を追加します。
- カスタムフォーマット: 日付形式を自由に設定できるようにします。
- ロケール: ユーザーのロケールに基づいて日付形式を自動的に設定します。
- イベントハンドラ: 入力欄にフォーカスが当たったときなど、特定のイベントに応じて現在の日付を挿入するようにします。
これらの改良は、より柔軟でユーザーフレンドリーなアプリケーションを作成するために役立ちます。
JavaScriptで現在の日付をdd/mm/yyyy形式で取得する方法：その他の方法
方法 1：toLocaleDateString()メソッドの使用
toLocaleDateString()メソッドは、Dateオブジェクトをロケールに基づいた形式の文字列に変換します。このメソッドを使用して、現在の日付をdd/mm/yyyy形式で取得することができます。
const currentDateInput = document.getElementById('currentDate');
const today = new Date();
const formattedDate = today.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' });
currentDateInput.value = formattedDate;
- 日付をフォーマット:
toLocaleDateString()メソッドを使用して、Dateオブジェクトをdd/mm/yyyy形式の文字列に変換します。'ja-JP'：ロケールを日本語（日本）に設定します。
- 入力欄に値を設定: 前述と同様に、フォーマットされた日付を入力欄に設定します。
方法 2：ライブラリの使用
Moment.jsなどのライブラリを使用すると、より簡単に現在の日付をフォーマットすることができます。
const currentDateInput = document.getElementById('currentDate');
const moment = require('moment'); // Moment.jsライブラリをインポート
const today = moment();
const formattedDate = today.format('DD/MM/YYYY');
currentDateInput.value = formattedDate;
- Moment.jsライブラリをインポート:
require('moment')を使用して、Moment.jsライブラリをインポートします。 - 日付をフォーマット:
format()メソッドを使用して、momentオブジェクトをdd/mm/yyyy形式の文字列に変換します。'DD/MM/YYYY': 日付形式を指定します。
どの方法を選択するかは、開発者の好みやプロジェクトの要件によって異なります。
- シンプルでわかりやすい方法を求める場合は、方法 1がおすすめです。
- より多くのフォーマットオプションやライブラリが提供するその他の機能が必要な場合は、方法 2がおすすめです。
いずれの方法を選択する場合も、コードをテストして、期待通りに動作することを確認することが重要です。
javascript html input
