HTML <input type="week"> 属性値

試してみましょう

<label for="camp-week">5 月か 6 月の週を選んでください:</label>

<input
  type="week"
  name="week"
  id="camp-week"
  min="2018-W18"
  max="2018-W26"
  required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

コントロールのユーザーインターフェイスは、ブラウザーによって様々です。現時点ではブラウザー間の対応は限定的で、 Chrome/Opera と Microsoft Edge のみが対応しています。対応していないブラウザーでは、このコントロールは単純な <input type="text"> に格下げされます。

値

文字列で、入力欄に入力された年と週を表します。この入力型で使われる日時値の形式は、週文字列で説明しています。

次のように value 属性に値を入れることで、デフォルト値を設定することができます。

<label for="week">どの週に始めたいですか。</label>
<input id="week" type="week" name="week" value="2017-W01" />

一点気を付けなければならないことは、実際の value は常に yyyy-Www の書式であり、表示される書式はこれとは異なる可能性があるということです。例えば、上記の値をサーバーに送信すると、ブラウザーは Week 01, 2017 のように表示するかもしれませんが、送信される値は常に week=2017-W01 のようになります。

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

const weekControl = document.querySelector('input[type="week"]');
weekControl.value = "2017-W45";

追加の属性

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

max

受け付ける（時間的に）最も遅い年と週番号で、上記の値の節で説明した文字列書式です。要素に入力された value がこれを超えた場合、要素は制約検証に失敗します。max 属性の値が妥当な週の文字列ではない場合、要素は最大値を持ちません。

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

min

受け付ける最も早い年と週です。要素の value がこれより小さいと、要素は制約検証に失敗します。属性の値が妥当な週の文字列ではない場合、要素は最小値を持ちません。

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

readonly

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

step

step 属性は値が準拠する粒度を指定する数値、または後述する特殊な値 any です。段階の基準値から整数倍の値のみが有効です。段階の基準値は（指定されていれば）min、そうでなければ value、どちらも提供されていなければ −259,200,000 （週 1970-W01 の先頭）です。

week 入力の場合、step の値は週単位で指定され、step の値の 604,800,000 倍に相当するミリ秒数として扱われます（内部の数値はミリ秒単位です）。デフォルト値は 1 で、これは 1 週間を示します。

文字列値の any は段階がないことを意味し、（min や max のようなほかの制約を除けば）どの値でも許可されます。実質的に、week 入力の場合、このピッカー UI では週単位でしか選択できないため、`1 と同じ効果になります。

week 入力欄の使用

week 入力欄は一見すると便利に見えます。簡単に週を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 <input type="week"> には問題があります。

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

week の基本的な使用

もっとも基本的な <input type="week"> の使用方法は、次のように基本的な <input> と <label> 要素の組み合わせです。

<form>
  <label for="week">どの週から始めますか。</label>
  <input id="week" type="week" name="week" />
</form>

入力欄のサイズの制御

<input type="week"> は、時刻が常にほぼ同じ文字数であるため、size などのフォームのサイズ指定属性に対応していません。サイズ調整が必要な場合は、CSS を利用する必要があります。

step 属性の使用

step 属性を使用して、週の番号が増加または減少するときに飛ばす番号を変更することができるはずですが、対応しているブラウザーでも何も動作していないようです。

検証

デフォルトで、 <input type="week"> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、妥当な年と週でないものの入力をさせず、これは便利ですが、それでも入力欄を空のままにすることができ、また選択できる週の範囲を制限したくなるかもしれません。

週の最大値と最小値の設定

min および max 属性を使用して、ユーザーが選択することができる有効な週を制限することができます。以下の例では、最小値を 2017 年第 1 週 に、最大値を 2017 年第 52 週 に設定しています。

<form>
  <label for="week">どの週から始めますか。</label>
  <input id="week" type="week" name="week" min="2017-W01" max="2017-W52" />
  <span class="validity"></span>
</form>