たった5つの質問に答えるだけで理想の企業に出会えるかも！？

【コピペ】はじめてのinput type=’month’の使い方！日付・カレンダー作成時のコツも解説

SHARE

本記事は、「HTMLで年と月を選択する入力欄を実装したいけれど、どのようにすればいいか分からない…」と思いつつ

UIHACK 編集長
UIHACK 編集長

・手軽に正確な日付を入力したい
・できたら面倒なカレンダーの入力は避けたい
・日付の入力を避けたい

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「input type=’month’の設定方法と初期値」を「後半」では応用編で「時刻」や「年齢」をHTMLだけで設定する方法を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

記事の読む前に！ブラウザ対応状況についての補足

Web開発において、クロスブラウザ対応は重要ですが、ブラウザごとのサポート状況を覚えるのは大変。
そこで以下の「Can I use」を利用しましょう。

参考
Date and time input types | Can I use… Support tables for HTML5, CSS3, etc

目次

  1. input type=’month’の設定と初期値のカスタマイズ方法を解説
    1. input type=’month’の設定方法
    2. input type=’month’の実行結果
    3. 初期値のカスタマイズ方法
    4. 初期値のカスタマイズの実行結果
    5. min属性とmax属性で日付を調整する方法
    6. readonly属性を使ったフォーム入力の必須化とエラーチェック
  2. input属性で、生年月日をプルダウン形式で選択する範囲の設定方法
  3. 時刻をドロップダウン形式で選択する範囲の設定方法
  4. 年齢をプルダウンメニュー形式で選択する範囲の設定方法
  5. input type=’month’の使い方の結論とまとめ

input type=’month’の設定と初期値のカスタマイズ方法を解説

input type=’month’は、HTMLのフォーム要素の一つであり、年と月の選択を簡単に実現するための入力フィールドです。ここでは、input type=’month’の設定方法と初期値のカスタマイズ方法を解説します。

input type=’month’の設定方法

input type=’month’を使用するには、要素のtype属性を“month”に設定します。例えば、以下のように記述します。

<label for="dateInput">年月選択：</label>
<input type="month" id="dateInput" name="date" />

input type=’month’の実行結果

UIHACK 編集長
UIHACK 編集長

解説

上記のコードでは、id属性が”dateInput”、name属性が”date”のinput要素がinput type=’month’として定義されています。これにより、ブラウザは年と月のプルダウンを表示し、ユーザーが選択できるようになります。

初期値のカスタマイズ方法

input type=’month’の初期値を設定するには、value属性を使用します。初期値を指定する場合は、value属性の値にyyyy-mm形式（年と月の値）を設定します。

<label for="dateInput">年月選択：</label>
<input type="month" id="dateInput" name="date" value="2023-07" />

初期値のカスタマイズの実行結果

UIHACK 編集長
UIHACK 編集長

解説

上記のコードでは、初期値として“2023年7月”が設定されています。これにより、ページを開いた際に初めに表示される年と月が設定されます。

まとめ

初期値をカスタマイズすることで、ユーザーにとってより使いやすく便利な入力欄を提供することができます。もちろん、value属性に空の値を設定すれば、初期値を空にすることもできます。

min属性とmax属性で日付を調整する方法

input type=’month’を使ってmin属性とmax属性を設定することで、ユーザーが特定の日付範囲内で年と月を選択できるように調整することができます。

min属性の設定

min属性は、選択可能な最小の日付を指定します。ユーザーはmin属性で指定された日付より前の日付を選択できません。

UIHACK 編集長
UIHACK 編集長

例えば、2023年1月1日以降の日付のみ選択できるようにしたい場合は、以下のようにmin属性を設定します。

<label for="dateInput">年月選択：</label>
<input type="month" id="dateInput" name="date" min="2023-01">

min属性の実行結果

max属性の設定

max属性は、選択可能な最大の日付を指定します。ユーザーはmax属性で指定された日付より後の日付を選択できません。

UIHACK 編集長
UIHACK 編集長

例えば、2023年12月31日までの日付のみ選択できるようにしたい場合は、以下のようにmax属性を設定します。

<label for="dateInput">年月選択：</label>
<input type="month" id="dateInput" name="date" max="2023-12">

max属性の実行結果

min属性とmax属性の同時設定

min属性とmax属性を同時に設定することで、特定の日付範囲内での選択を制限することができます。

UIHACK 編集長
UIHACK 編集長

例えば、2023年1月から2023年12月の間の日付のみ選択できるようにしたい場合は、以下のようにmin属性とmax属性を設定します。

<label for="dateInput">年月選択：</label>
<input type="month" id="dateInput" name="date" min="2023-01" max="2023-12">

min属性とmax属性の実行結果

UIHACK 編集長
UIHACK 編集長

解説

上記のように、min属性とmax属性を設定することで、特定の日付範囲内での年と月の選択を制御できます。
今回の場合「2023-01」〜「2023-12」の範囲を設定できるようにしております。

まとめ

min属性とmax属性を使用して、特定の年と月の選択を制限します。

min属性は最小の年と月を指定し、max属性は最大の年と月を指定します。

例えば、2023年1月以降の年と月のみを選択させる場合はmin=”2023-01″、2023年12月までの年と月のみを選択させる場合はmax=”2023-12″と設定します。

また、min属性とmax属性を同時に設定すれば、2023年1月から2023年12月の間の年と月のみを選択できるようになります。

readonly属性を使ったフォーム入力の必須化とエラーチェック

input type=’month’をreadonly属性と組み合わせてフォーム入力を必須化し、エラーチェックを行う方法について説明します。

フォーム入力の必須化（readonly属性と組み合わせ）

input type=’month’にreadonly属性を設定すると、ユーザーは入力欄に直接値を入力できなくなりますが、カレンダーからの選択は可能となります。これを利用して、入力欄をフォームの必須項目として扱うことができます。

<label for="dateInput">年月選択：</label>
<input type="month" id="dateInput" name="date" readonly required>

フォーム入力の必須化の実行結果

UIHACK 編集長
UIHACK 編集長

解説

上記のコードでは、input type=’month’にreadonly属性とrequired属性を設定しています。これにより、入力欄は読み取り専用となり、必須入力項目としてブラウザが認識します。フォームを送信する前に、ユーザーが年と月を選択することを強制します。

エラーチェック

フォームが送信される前に、JavaScriptを使用してエラーチェックを行うことで、選択がされていない場合にエラーメッセージを表示することができます。

<form onsubmit="return checkForm()">
  <label for="dateInput">年月選択：</label>
  <input type="month" id="dateInput" name="date" readonly required>
  <input type="submit" value="送信">
</form>

<script>
function checkForm() {
  var dateInput = document.getElementById("dateInput");
  if (!dateInput.value) {
    alert("年と月を選択してください。");
    return false;
  }
  return true;
}
</script>
UIHACK 編集長
UIHACK 編集長

解説

上記のコードでは、フォームが送信される前にcheckForm()関数が呼び出されます。この関数では、dateInput要素の値が空かどうかを確認し、空の場合にはエラーメッセージを表示します。return false;により、フォームの送信がキャンセルされます。

これにより、フォームの必須入力チェックをreadonly属性とJavaScriptを組み合わせて行うことができます。ユーザーに対して年と月の選択を強制し、フォームのデータの正確性を確保することができます。

まとめ

readonly属性を使ってフォーム入力を必須化し、エラーチェックを行う方法について説明します。通常のフォーム入力ではなく、disabled属性を使用してフォーム入力を無効化することで、必須入力を強制します。

input type=’month’にdisabled属性を設定し、JavaScriptでエラーチェックを行います。フォーム送信前に、空の場合にはエラーメッセージを表示してキャンセルします。ユーザーに年と月の選択を強制し、データの正確性を確保します。

input属性で、生年月日をプルダウン形式で選択する範囲の設定方法

生年月日をプルダウン形式で選択する範囲を設定する方法について説明します。この場合、年、月、日それぞれに対して範囲を指定する必要があります。

年の範囲指定

input type=’date’では、min属性とmax属性を使用して年の範囲を指定します。min属性には最小の日付を、max属性には最大の日付を指定します。年の範囲は、yyyyの形式で指定します。

<label for="dateInput">年月選択：</label>
<input type="month" id="dateInput" name="date" min="2023-01">

年の範囲指定の実行結果

UIHACK 編集長
UIHACK 編集長

解説

上記の例では、1990年1月1日から2005年12月31日までの範囲内で生年月日を選択できるようになります。

月の範囲指定

input type=’date’では、min属性とmax属性を使用して月の範囲を指定することもできます。ただし、月の範囲指定はブラウザによってサポートされていない場合がありますので、注意が必要です。

<label for="birthdate">生年月日：</label>
<input type="date" id="birthdate" name="birthdate" min="1990-01" max="2005-12">

月の範囲指定の実行結果

UIHACK 編集長
UIHACK 編集長

解説

上記の例では、1990年1月から2005年12月までの範囲内で生年月日を選択できるようになりますが、全てのブラウザで正しく動作するわけではありません。

日の範囲指定

input type=’date’では、min属性とmax属性を使用して日の範囲を指定することもできます。ただし、日の範囲指定はブラウザによってサポートされていない場合がありますので、同様に注意が必要です。

<label for="birthdate">生年月日：</label>
<input type="date" id="birthdate" name="birthdate" min="1990-01-01" max="2005-12-31">

日の範囲指定の実行結果

UIHACK 編集長
UIHACK 編集長

解説

上記の例では、1990年1月1日から2005年12月31日までの範囲内で生年月日を選択できるようになりますが、こちらも全てのブラウザで正しく動作するわけではありません。

時刻をドロップダウン形式で選択する範囲の設定方法

HTMLだけで時刻をドロップダウン形式で選択する範囲を設定する方法について説明します。時刻のドロップダウン選択肢は、HTMLのinput要素のtype属性をtimeに設定することで実現します。

<label for="timeInput">時刻選択：</label>
<input type="time" id="timeInput" name="time" min="08:00" max="18:00" step="900">

type属性をtimeにした時の実行結果

UIHACK 編集長
UIHACK 編集長

解説

上記のコードでは、input要素のtype属性をtimeに設定して、時刻をドロップダウン形式で選択するフィールドを作成しています。

まとめ

min属性: 選択可能な最小の時刻を指定します。例では、08:00より前の時刻は選択できません。


max属性: 選択可能な最大の時刻を指定します。例では、18:00より後の時刻は選択できません。


step属性: 時刻の選択間隔を指定します。例では、15分刻みの選択肢を表示します（900秒）。

年齢をプルダウンメニュー形式で選択する範囲の設定方法

年齢をプルダウンメニュー形式で選択する範囲の設定方法は、HTMLのselect要素のoption要素にvalue属性を使って値を設定することで実現します。

UIHACK 編集長
UIHACK 編集長

例えば、0歳から100歳までの年齢を選択可能なプルダウンメニューを作成する場合は、以下のようなHTMLコードを使用します。

<div>
<label for="ageSelect">年齢選択：</label>
<select id="ageSelect" name="age">
  <option value="">--選択してください--</option>
  <!-- 0歳から100歳までの年齢をプルダウンに追加 -->
  <option value="0">0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
  <option>30</option>
  <option>31</option>
  <option>32</option>
  <option>33</option>
  <option>34</option>
  <option>35</option>
  <option>36</option>
  <option>37</option>
  <option>38</option>
  <option>39</option>
  <option>40</option>
  <option>41</option>
  <option>42</option>
  <option>43</option>
  <option>44</option>
  <option>45</option>
  <option>46</option>
  <option>47</option>
  <option>48</option>
  <option>49</option>
  <option>50</option>
  <option>51</option>
  <option>52</option>
  <option>53</option>
  <option>54</option>
  <option>55</option>
  <option>56</option>
  <option>57</option>
  <option>58</option>
  <option>59</option>
  <option>60</option>
  <option>61</option>
  <option>62</option>
  <option>63</option>
  <option>64</option>
  <option>65</option>
  <option>66</option>
  <option>67</option>
  <option>68</option>
  <option>69</option>
  <option>70</option>
  <option>71</option>
  <option>72</option>
  <option>73</option>
  <option>74</option>
  <option>75</option>
  <option>76</option>
  <option>77</option>
  <option>78</option>
  <option>79</option>
  <option>80</option>
  <option>81</option>
  <option>82</option>
  <option>83</option>
  <option>84</option>
  <option>85</option>
  <option>86</option>
  <option>87</option>
  <option>88</option>
  <option>89</option>
  <option>90</option>
  <option>91</option>
  <option>92</option>
  <option>93</option>
  <option>94</option>
  <option>95</option>
  <option>96</option>
  <option>97</option>
  <option>98</option>
  <option>99</option>
  <option>100</option>
</select>
歳
</div>

年齢をプルダウンメニュー形式の実行結果

歳
UIHACK 編集長
UIHACK 編集長

解説

上記のコードでは、select要素内にoption要素を追加しています。各option要素のvalue属性には、選択されたときにフォームから送信される値（年齢の数値）を指定しています。表示テキストとしては、”歳”を付けて年齢を表示しています。

input type=’month’の使い方の結論とまとめ

UIHACK 編集長
UIHACK 編集長

今回は、input type=’month’を使った年と月を選択するフォームや、さらにはmin属性とmax属性についてご紹介しました。それでは、最後にもう一度、おさらいしましょう。

本記事で学んだ事
  • input type=’month’の設定と初期値のカスタマイズ方法を解説
  • input属性で、生年月日をプルダウン形式で選択する範囲の設定方法
  • 時刻をドロップダウン形式で選択する範囲の設定方法
  • 年齢をプルダウンメニュー形式で選択する範囲の設定方法

もう一度、最初から「input type=’month’の設定と初期値のカスタマイズ方法を解説」を読む↑

独学は難しそう… そんなあなたにおすすめのプログラミングスクール

エンジニア向けにおすすめのガジェットアイテムを知りたいあなたにオススメ！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【再利用】JavaScript関数(function)と引数の…

次の記事

【現役プログラマーが解説】HTMLでラジオボタンでchecke…