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

HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

HTMLでは、<input type="month"> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？

実は、HTML標準仕様には「年」専用の入力タイプ（type="year"）は用意されていません。

jQuery Datepickerで年の入力を実現する

年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type="text">）と組み合わせてDatepickerを適用し、dateFormat オプションを 'yy' に設定することで、画面上には年のみが表示されるようになります。

サンプルコード

以下のコードを実行して、年を入力・設定する方法を実際に確認してみましょう。

<html>
   <head>
      <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
      </script>
      <script type="text/javascript">
         $(function() {
            $( "#date" ).datepicker({dateFormat: 'yy'});
         });
      </script>
   </head>
   <body>
      <form action = "" method = "get">
         Details:<br> <br>
         Student Name <br> <input type="name" name="sname"> <br>
         Year of Birth <br> <input type="text" id="date"> <br>
         <input type="submit" value="Submit">
      </form>
   </body>
</html>

補足：jQuery UIライブラリの読み込みに注意

datepicker() メソッドはjQuery本体ではなくjQuery UIに含まれる機能です。そのため、実際に動作させるときは、jQueryに加えてjQuery UIのCSS・JavaScriptファイルも忘れずに読み込んでください。これにより、生年月日の「年」だけを入力させたいフォームなどで、直感的なカレンダーUIを提供できます。

  1. HTMLのstep属性とは？数値入力の間隔を指定する方法をわかりやすく解説

    HTMLのstep属性は、<input>要素に入力できる数値の間隔（ステップ）を定義するための属性です。例えば「0、4、8、12、16…」のように、一定の間隔で数値を増減させたい場合に使用します。また、min属性やmax属性と組み合わせることで、有効な値の範囲を細かく制御することも可能です。 step属性の基本的な使い方 step属性は、type=numberやtype=range、type=dateなどの入力フィールドで利用できます。値として正の数を指定すると、その数値が入力の刻み幅になります。デフォルト値は「1」です。 使用例：step属性で刻み幅を4に設定する 以下のコードで

  2. HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法

    テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。 記述例 以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。 <!DOCTYPE html> <html>    <body&