このプログラムでは、JavaScriptのDate
オブジェクトを使用して、現在の日付をMM/DD/YYYY形式に変換して表示します。padStart()
メソッドを使って月や日を2桁に揃えます。
目次
使用するメソッド: getMonth(), getDate(), getFullYear()
JavaScriptのDate
オブジェクトを使い、日付の各部分(年、月、日)を個別に取得し、フォーマットをMM/DD/YYYY形式に変換します。padStart()
メソッドを使用することで、1桁の月や日を2桁に揃えます。
日付を特定の形式(MM/DD/YYYY)に変換するプログラム
以下のコードでは、現在の日付をMM/DD/YYYY形式に変換して表示しています。
HTMLとJavaScriptコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日付を特定の形式(MM/DD/YYYY)に変換する方法</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
pre {
background: #f4f4f4;
border-left: 3px solid #ccc;
padding: 10px;
margin: 20px 0;
}
</style>
<script>
window.onload = function() {
// 現在の日付を取得
const today = new Date();
// 月、日、年を取得し、MM/DD/YYYY形式に変換
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月は0から始まるため+1
const day = String(today.getDate()).padStart(2, '0');
const year = today.getFullYear();
// フォーマットをMM/DD/YYYYに変更
const formattedDate = `${month}/${day}/${year}`;
// 結果をHTMLに表示
document.getElementById('formattedDateResult').textContent = `フォーマットされた日付: ${formattedDate}`;
}
</script>
</head>
<body>
<h1>日付を特定の形式(MM/DD/YYYY)に変換する方法</h1>
<div id="formattedDateResult"></div>
</body>
</html>
プログラムの解説
このプログラムでは、Date
オブジェクトのgetMonth()
、getDate()
、getFullYear()
メソッドを使用して日付の各要素を取得し、それらをMM/DD/YYYY形式にフォーマットしています。また、padStart()
を使って1桁の月や日があった場合にも2桁で表示できるようにしています。
Dateオブジェクト メソッドの機能一覧
Dateオブジェクト メソッドの機能一覧 | JavaScript リファレンス
JavaScriptのDateオブジェクトは、日時を操作するために使用されるオブジェクトです。以下に、Dateオブジェクトのメソッドを種類ごとにアルファベット順にまとめています。 Dateオブジェクトのインスタンスメソッド メソッド名 説明と注意点 getDate() 日(1~31)を取得。 注意点: 月初や月末の値に...