JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで日付の「日」を設定する方法｜setDate()の使い方を解説

JavaScriptでは、DateオブジェクトのsetDate()メソッドを使うことで、日付の「日」（1〜31）を設定・変更できます。この記事では、実際のコード例と実行結果をもとに、setDate()の基本的な使い方をわかりやすく解説します。

setDate()メソッドとは

setDate()は、Dateオブジェクトの「日」の値だけを変更するためのメソッドです。年や月はそのままに、日にちだけを差し替えたい場合に便利です。引数には1〜31の整数を指定しますが、範囲外の値を渡してもエラーにはならず、自動的に月をまたいだ日付へと調整されます。また、このメソッドは元のDateオブジェクト自体を書き換える（破壊的な操作である）点にも注意しましょう。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptで日付の日を設定する</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>
上のボタンをクリックすると、日付オブジェクトの「日」が変更されます
</h3>
<script>
    let sampleEle = document.querySelector('.sample');
    let resEle = document.querySelector(".result");
    let dateObj = new Date();
    sampleEle.innerHTML = dateObj;
    document.querySelector(".Btn").addEventListener("click", () => {
        dateObj.setDate(28)
        resEle.innerHTML = '「日」を変更した結果 =<br> '+dateObj;
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず現在の日付が表示されます。

JavaScriptで日付の「日」を設定する方法｜setDate()の使い方を解説

「クリックしてください」ボタンをクリックすると、「日」が28に変更された日付が表示されます。

JavaScriptで日付の「日」を設定する方法｜setDate()の使い方を解説

補足：setDate()の便利なポイント

  • 0を指定すると、前月の最終日に設定できます。
  • 範囲外の値（32や負の数など）を指定してもエラーにならず、自動的に月をまたいで計算されます。
  • 関連メソッドとして、月を設定するsetMonth()、年を設定するsetFullYear()なども合わせて覚えておくと便利です。
  1. JavaScriptで月の日（日にち）を取得するには？getDate()メソッドの使い方

    JavaScriptで月の日（日にち）を取得するには、getDate()メソッドを使用します。このメソッドは、ローカルタイムに基づいて、指定した日付の「日」を表す値を返します。getDate()メソッドの戻り値は、1から31までの整数です。日付オブジェクトから簡単に日にちだけを取り出したい場合に便利なメソッドです。getDate()メソッドの基本構文dateObj.getDate()引数は不要で、呼び出し元のDateオブジェクトが保持する日付から「日」の部分を整数として返します。サンプルコード以下のコードを実行すると、JavaScriptで月の日を取得する方法を実際に確認できます。<ht

  2. JavaScriptで現在の時刻を別のタイムゾーンの時刻に変更して表示する方法

    JavaScriptのDateオブジェクトは、端末（システム）に設定されている時刻をそのまま取得して現在の日付・時刻を表示します。そのため、JavaScript単体でシステム時刻そのものを書き換えることはできません。 しかし、UTC（協定世界時）との時差であるタイムゾーンオフセットを計算に組み込むことで、あたかも別の時刻が設定されたかのように表示することが可能です。以下では、シンガポール（GMT+8）の時刻を求めるサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html>    <body>