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

HTML DOM Input Month minプロパティの使い方を解説

HTML DOM Input Month minプロパティとは

HTML DOMのinput month minプロパティは、HTMLドキュメント内でtype="month"が指定された入力フィールドのmin属性の値を取得・変更するためのプロパティです。min属性を設定することで、ユーザーが選択できる月の最小値(下限)を制限できます。

構文

基本的な構文は以下の通りです。

min値を取得する場合

object.min

min値を変更する場合

object.min = "YYYY-MM"

ここで、YYYYは年(4桁)、MMは月(2桁)を表します。例えば「2019-02」のような形式で指定します。

使用例

HTML DOM input month minプロパティの具体的な使用例を見てみましょう。以下の例では、min属性とmax属性を組み合わせることで、選択できる月の範囲を2019年4月〜2019年8月に制限しています。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
        center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    input{
        display:block;
        width:35%;
        border:2px solid #fff;
        background-color:transparent;
        color:#fff;
        font-weight:bold;
        padding:8px;
        margin:1rem auto;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input month max/min property Demo</h1>
<p>Hi, Do you need leave from your work?</p>
<p>If yes then select your desired one month between April & August:</p>
<input type="month" class="monthInput" min="2019-04" max="2019-08">
<button onclick="showMySelection()" class="btn">Show Result</button>
<div class="show"></div>
<script>
    function showMySelection() {
        var monthInput = document.querySelector(".monthInput");
        var showMsg = document.querySelector(".show");
        if(monthInput.value === ''){
            showMsg.innerHTML="Please Select!!";
        } else {
            showMsg.innerHTML=monthInput.value;
        }
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような画面が表示されます。

HTML DOM Input Month minプロパティの使い方を解説

月入力フィールドを使って、4月から8月の間で任意の月を選択します。

HTML DOM Input Month minプロパティの使い方を解説

月を選択した後、「Show Result(結果を表示)」ボタンをクリックすると、選択した月が画面に表示されます。

HTML DOM Input Month minプロパティの使い方を解説

まとめ

input month minプロパティを活用すれば、JavaScriptから動的に月入力フィールドの最小選択可能月を制御できます。maxプロパティと併用することで選択範囲を柔軟に設定でき、休暇申請フォームなど、期間を限定した入力を受け付ける場面で特に役立ちます。

  1. HTML DOMのMeter minプロパティとは？取得・設定方法をわかりやすく解説

    Meter の min プロパティは、HTML の <meter> 要素における min 属性に対応する数値を、JavaScript から取得または設定できるプロパティです。このプロパティを max、high、low などの各属性と組み合わせて使うことで、より正確で視覚的に分かりやすいメーター表示を実現できます。 構文 min プロパティの基本的な構文は以下のとおりです。 現在の値を取得する場合 meterElementObject.min 新しい値を設定する場合 meterElementObject.min = number 取得時には min 属性に対応する数値が返され、設定時

  2. HTML DOM Input Rangeのminプロパティとは?構文と使い方を解説

    HTML DOM Input RangeのminプロパティとはHTML DOMのInput Range minプロパティは、レンジスライダーコントロールのmin属性値を設定または取得するために使用されます。この属性はスライダーコントロールの最小値を示すもので、通常はmaxプロパティと組み合わせて、スライダーが移動できる値の範囲を定義する際に活用されます。構文minプロパティの構文は以下の通りです。minプロパティの値を設定する場合rangeObject.min = numberここで、numberはスライダーコントロールに設定する最小値を表します。minプロパティの値を取得する場合rangeO