この記事は翻訳作業中です。

<input> 要素の month 型は、ユーザーが年と月を入力できるようにする入力フィールドを作成し、年と月を簡単に入力できるようにします。値は YYYY-MM の形式の文字列で、 YYYY は4桁の年、 MM は月の番号です。

コントロールのユーザーインターフェイスは、一般にブラウザーによって異なります。現時点では対応が不安定であり、デスクトップ版の Chrome/Opera と Edge — および最新のバージョンのモバイルブラウザー — のみに利用可能な実装があります。 month 入力欄に対応していないブラウザーでは、コントロールは単純な <input type="text"> に格下げされますが、入力されたテキストが期待されている形式であることを保証するための自動検証が行われることもあります。

month に対応していないブラウザーを使用している場合のために、このスクリーンショットで Chrome と Opera でどのように見えるかを示します。右端にある下向き矢印をクリックすると、年と月を選択できる日付選択が表示されます。

Microsoft Edge では、 month コントロールはこのように表示されます。

年と月を表す DOMString、または空欄
イベント change および input
対応している共通属性 autocomplete, list, readonly, step
IDL 属性 value
メソッド select(), stepDown(), stepUp()

DOMString で、入力欄に入力された年と月の値を YYYY-MM (4桁の年に続いてハイフン ("-")、続いて2桁の月) の形式で表します。入力コントロールの既定値は、次のように value 属性に年と月を入れることで設定することができます。

<label for="bday-month">生まれた月は?</label>
<input id="bday-month" type="month" name="bday-month" value="2017-06">

一点気を付けなければならないことは、表示される日付の書式は実際の value とは異なるということです。多くのユーザーエージェントは、年と月をユーザーのオペレーティングシステムに設定されたロケールに適した形式で表示しますが、日付の value は常に yyyy-MM の書式です。

When the above value is submitted to the server, for example, it will look like bday-month=1978-06.

次のように、 JavaScript で value プロパティを使用して、日付の値を取得したり設定したりすることもできます。

var monthControl = document.querySelector('input[type="month"]');
monthControl.value = '1978-06';

追加の属性

すべての <input> 型で共通する属性に加え、 month 型の入力欄は次の属性にも対応しています。

属性 説明
max 受け付ける最新の年月
min 受け付ける最古の年月
readonly 論理属性で、存在すれば、入力欄の値が編集できないことを示す
step 上下の矢印で値を調整する時や、検証に使用する刻み値

max

最新の年月で、上記ので説明した文字列の書式です。要素に入力された value がこの日付よりも後の場合、要素は制約の検証に失敗します。 max 属性の値が yyyy-MM の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。

この値は min 属性で指定されたものより後か、同じ年月を指定する必要があります。

min

受け付ける最古の年月で、前述と同じ yyyy-MM の書式です。要素の value がこれより前の場合、要素は制約の検証に失敗します。 min 属性の値が yyyy-MM-dd の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。

この値は max 属性で指定されたものより前か、同じ年月を指定する必要があります。

readonly

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value は、 JavaScript コードから直接 HTMLInputElement.value プロパティを設定することで変更することができます。

メモ: 読み取り専用フィールドは値を持てないため、 requiredreadonly 属性も指定されている入力欄には効果がありません。

step

step 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 any です。刻みの基準値に等しい値 (指定されていれば min、そうでなければ value、どちらも設定されていなければ適切な既定値) のみが妥当となります。

文字列値の any は刻みがなく、どの値でも許可されることを意味します (minmax など、他の制約に制限されます)。

メモ: ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が二つあった場合は、正の方向の推奨値に丸められます。

date 入力欄では、 step の値は月数で指定され、倍率は1です (数値も月単位であるため)。 step の既定値は 1 です。

month 入力欄の使用

(month を含め) 日付に関する入力欄は一見すると便利に見えます。日付の選択に簡単なユーザーインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、現時点ではブラウザーの対応が限定されているため、 <input type="month"> には問題があります。

<input type="month"> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの対応の問題を緩和するアドバイスを提供しましょう (ブラウザーの対応の扱い を参照してください)。

月入力の基本的な使用

The simplest use of <input type="month"> involves a basic <input> and <label> element combination, as seen below:

<form>
  <label for="bday-month">What month were you born in?</label>
  <input id="bday-month" type="month" name="bday-month">
</form>

Setting maximum and minimum dates

You can use the min and max attributes to restrict the range of dates that the user can choose. In the following example we specify a minimum month of 1900-01 and a maximum month of 1999-12:

<form>
  <label for="bday-month">What month were you born in?</label>
  <input id="bday-month" type="month" name="bday-month"
         min="1900-01" max="1999-12">
</form>

The result here is that:

  • Only months between in January 1900 and December 1999 can be selected; months outside that range can't be scrolled to in the control.
  • Depending on what browser you are using, you might find that months outside the specified range might not be selectable in the month picker (e.g. Edge), or invalid (see Validation) but still available (e.g. Chrome).

入力欄の寸法の制御

<input type="month"> doesn't support form sizing attributes such as size. You'll have to resort to CSS for sizing needs.

検証

既定で、 <input type="month"> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。これは便利です。しかし、それでも month 入力欄を空のまま、または無効な日付 (例えば4月32日など) を入力してフォームを送信することが可能です。

To help avoid this, you can use min and max to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the required attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.

Let's look at an example; here we've set minimum and maximum dates, and also made the field required:

<form>
  <div>
    <label for="month">What month would you like to visit us (Summer months only, please)?</label>
    <input id="month" type="month" name="month"
           min="2017-06" max="2017-09" required>
    <span class="validity"></span>
  </div>
  <div>
      <input type="submit" value="Submit form">
  </div>
</form>

If you try to submit the form without both the month and year specified (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

Here's a screenshot for those of you who aren't using a supporting browser:

Here's the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a <span> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

重要: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。

ブラウザーの対応の扱い

As mentioned above, the major problem with using date inputs at the time of writing is that many major browsers don't yet implement them all; only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the month picker on Chrome for Android looks like this:

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the more serious of the two. As mentioned earlier, with a month input the actual value is always normalized to the format yyyy-mm. On the other hand, in its default configuration, a text input has no idea what format the date should be in, and this is an issue because of the number of different ways in which people write dates. For example:

  • mmyyyy (072018)
  • mm/yyyy (07/2018)
  • mm-yyyy (07-2018)
  • yyyy-mm (2018-07)
  • Month yyyy (July 2018)
  • ... and so forth.

One way around this is to put a pattern attribute on your month input. Even though the month input doesn't use it, if the browser falls back to treating it like a text input, the pattern will be used. For example, try viewing the following demo in a browser that doesn't support month inputs:

<form>
  <div>
    <label for="month">What month would you like to visit us? (Summer months only, yyyy-mm)</label>
    <input id="month" type="month" name="month"
           min="2017-06" max="2017-09" required
           pattern="[0-9]{4}-[0-9]{2}">
    <span class="validity"></span>
  </div>
  <div>
      <input type="submit" value="Submit form">
  </div>
</form>

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates (such as "0000-42"), or incorrectly formatted dates that follow the pattern.

There's also the problem that the user won't necessarily know which of the many date formats is expected. We have work left to do.

The best way to deal with dates in forms in a cross-browser way (until all of the major browsers have supported them for a while) is to get the user to enter the month and year in separate controls (<select> elements being popular; see below for an implementation), or use JavaScript libraries such as the jQuery date picker plugin.

Examples

In this example, we create two sets of UI elements, each designed to let the user select a month and year. The first is a native month input, and the other is a pair of <select> elements that allow choosing a month and year independently, for compatibility with browsers that don't yet support <input type="month">.

HTML

The form that requests the month and year looks like this:

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?</label>
    <input type="month" id="month-visit" name="month-visit">
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">What month would you like to visit us?</p>
  <div class="fallbackDatePicker">
    <div>
      <span>
        <label for="month">Month:</label>
        <select id="month" name="month">
          <option selected>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year">
        </select>
      </span>
    </div>
  </div>
</form>

The <div> with the ID "nativeDatePicker" uses the month input type to request the month and year, while the <div> with the ID "fallbackDatePicker" instead uses a pair of <select> elements. The first requests the month, and the second the year.

The <select> for choosing the month is hardcoded with the names of the months, as they don't change (leaving localization out of things). The list of available year values is dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work).

The other part of the example that may be of interest is the feature detection code. In order to detect whether the browser supports <input type="month">, we create a new <input> element, set its type to month, then immediately check what its type is set to. Browsers that don't support type month will return text, since that's What month falls back to when not supported. If <input type="month"> is not supported, we hide the native picker and show the fallback picker UI instead.

JavaScript

The JavaScript code that handles selecting which approach to use and to set up the list of years to include in the non-native year <select> follows:

// define variables
var nativePicker = document.querySelector('.nativeDatePicker');
var fallbackPicker = document.querySelector('.fallbackDatePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'month';
// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the years dynamically
  // (the months are always the same, therefore hardcoded)
  populateYears();
}

function populateYears() {
  // get the current year as a number
  var date = new Date();
  var year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for(var i = 0; i <= 100; i++) {
    var option = document.createElement('option');
    option.textContent = year-i;
    yearSelect.appendChild(option);
  }
}

メモ: 53週ある年もあることを忘れないでください(年あたりの週数を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。

仕様書

仕様書 状態 備考
HTML Living Standard
<input type="month"> の定義
現行の標準  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 20Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 888320.
IE 未対応 なしOpera 完全対応 11Safari 未対応 なし
補足
未対応 なし
補足
補足 The input type is recognized, but there is no month-specific control.
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, silverskyvicto
最終更新者: mfuji09,