<label for="camp-week">5月か6月の週を選んでください:</label><input  type="week"  name="week"   min="2018-W18"  max="2018-W26"  required />

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

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

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

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

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

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

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

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;}

<form>  <div>    <label for="week">どの週から始めますか。</label>    <input           type="week"      name="week"      min="2017-W01"      max="2017-W52"      required />    <span></span>  </div>  <div>    <input type="submit" value="フォームを送信" />  </div></form>

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

<form>  <div>    <label for="week">どの週から始めますか。</label>    <input           type="week"      name="week"      min="2017-W01"      max="2018-W52"      required />    <span></span>  </div>  <p>どの週から始めますか。</p>  <div>    <div>      <span>        <label for="week">Week:</label>        <select name="week"></select>      </span>      <span>        <label for="year">Year:</label>        <select name="year">          <option value="2017" selected>2017</option>          <option value="2018">2018</option>        </select>      </span>    </div>  </div></form>

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;}

// 変数を定義const nativePicker = document.querySelector(".nativeWeekPicker");const fallbackPicker = document.querySelector(".fallbackWeekPicker");const fallbackLabel = document.querySelector(".fallbackLabel");const yearSelect = document.querySelector("#year");const weekSelect = document.querySelector("#fallbackWeek");// 最初はフォールバックを非表示にするfallbackPicker.style.display = "none";fallbackLabel.style.display = "none";// 新しい日付入力が文字列入力にフォールバックされるかどうかconst test = document.createElement("input");try {  test.type = "week";} catch (e) {  console.log(e.description);}// もし文字列入力になるならば、 if () {} ブロックの中のコードを実行するif (test.type === "text") {  // ネイティブの日付選択を隠してフォールバック版を表示  nativePicker.style.display = "none";  fallbackPicker.style.display = "block";  fallbackLabel.style.display = "block";  // 週を動的に生成する  populateWeeks();}function populateWeeks() {  // 週の選択肢を 52 週で生成  for (let i = 1; i <= 52; i++) {    const option = document.createElement("option");    option.textContent = i < 10 ? `0${i}` : i;    weekSelect.appendChild(option);  }}

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

Help improve MDN

This page was last modified on⁨2025年7月10日⁩ byMDN contributors.