HTML DOM input オブジェクト - week

HTML DOM input オブジェクト - week タイプ详解

この文書では、HTML DOM の <input type="week"> 要素について詳しく解説します。その用途、属性、メソッド、ブラウザの互換性など、この要素の理解と使用を深めるのに役立つ情報を提供します。

1. week 入力タイプの概要

定義

<input type="week"> は、ユーザーが年と週で構成される日付情報を入力できるようにします。この入力タイプは、週単位で日付を選択するためのインターフェースを提供します。

用途

この要素は、予約システムやスケジュール管理など、ユーザーが特定の年と週を選択する必要がある場合に適しています。たとえば、スケジュールや会議の週を指定する場面で使用されます。

表示効果

ブラウザやオペレーティングシステムによって表示方法は異なりますが、通常は年と週の選択を含むドロップダウンメニューまたはカレンダー形式の選択ボックスとして表示されます。

2. week 入力ボックスの属性とメソッド

共通属性

<input type="week"> 要素は、以下のようなすべてのグローバル属性をサポートしています。

属性	説明
`disabled`	入力ボックスを無効にするかどうかを設定します。
`readonly`	入力ボックスを読み取り専用にするかどうかを設定します。
`value`	入力ボックスの値を取得または設定します。

特殊属性

<input type="week"> 専用の属性もいくつかあります。

属性	説明
`value`	現在選択されている週を表し、"YYYY-Www"（例: "2023-W42"）の形式です。
`min`	選択可能な最小週数を設定します。
`max`	選択可能な最大週数を設定します。

メソッド

<input type="week"> 要素は、以下の共通メソッドをサポートしています。

メソッド	説明
`focus()`	入力ボックスにフォーカスを移します。
`blur()`	入力ボックスからフォーカスを外します。
`stepUp()`	入力値を増加させます。
`stepDown()`	入力値を減少させます。

3. week 入力ボックスの検証

自動検証

最新のブラウザは、ユーザーが入力した形式が正しいかどうかを自動的に検証します。ユーザーが不正な形式の週を入力した場合、エラーメッセージが表示されます。

カスタム検証

JavaScript と正規表現を使用して、より詳細な検証を行うことができます。カスタム検証を実装することで、特定のビジネスロジックや形式に合わせた検証が可能です。


var weekInput = document.getElementById('weekInput');
var weekPattern = /^\d{4}-W\d{2}$/;

weekInput.addEventListener('input', function() {
    if (!weekPattern.test(weekInput.value)) {
        weekInput.setCustomValidity("有効な週の形式（YYYY-Www）を入力してください。");
    } else {
        weekInput.setCustomValidity("");
    }
});

4. ブラウザの互換性

デスクトップブラウザ

ほとんどの主要なデスクトップブラウザは <input type="week"> 要素をサポートしています。

ブラウザ	バージョン	サポート
Chrome	57+	✅
Firefox	52+	✅
Safari	10.1+	✅
Edge	16+	✅

モバイルブラウザ

一部のモバイルブラウザは、この要素をサポートしていないか、異なる方法で表示する場合があります。

ブラウザ	バージョン	サポート
iOS Safari	10.3+	✅
Android Chrome	57+	✅
Android Firefox	52+	✅

詳細については、Can I use を参照してください。

5. 使用例

シンプルな week 入力ボックスを作成する

以下は、シンプルな週入力ボックスの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルな week 入力ボックスを作成する</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
        input {
            padding: 8px;
            font-size: 16px;
        }
    </style>
</head>
<body>

<h1>シンプルな week 入力ボックスを作成する</h1>

<p>以下は、シンプルな週入力ボックスの例です。</p>

<label for="weekInput">週を選択してください:</label>
<input type="week" id="weekInput" name="weekInput" value="2023-W42">

</body>
</html>

JavaScript を使用して week 入力ボックスの値を取得および設定する

JavaScript を使用して、週入力ボックスの値を取得したり設定したりする方法の例です。


const weekInput = document.getElementById('weekInput');
console.log(weekInput.value); // 出力: "2023-W42"

weekInput.value = '2024-W01'; // 新しい値を設定する

6. まとめ

<input type="week"> 要素は、ユーザーが選択した週の情報を簡単に取得する方法を提供します。その属性、メソッド、ブラウザの互換性を理解することで、実際のプロジェクトでより効果的に使用することができます。

追加の推奨事項

ユーザーエクスペリエンスを向上させるために、<input type="week"> 要素を使用する際には、明確なラベルと説明を提供することをお勧めします。
この要素をサポートしていないブラウザの場合、サードパーティ製のライブラリを使用するか、カスタムコンポーネントを作成して同様の機能を実現することを検討してください。

Q&A

Q1: `<input type="week">` はすべてのブラウザでサポートされていますか？

A1: いいえ、一部の古いブラウザや特定のモバイルブラウザではサポートされていない場合があります。最新のブラウザの互換性については、Can I use を参照してください。

Q2: 週の値の形式は何ですか？

A2: 週の値は、"YYYY-Www" の形式です。YYYY は年を表し、Www は週番号を表します。例えば、"2023-W42" は2023年の第42週を示します。

Q3: `<input type="week">` の値を JavaScript で検証するにはどうすればよいですか？

A3: 正規表現を使用して値を検証できます。次の正規表現は、"YYYY-Www" の形式と一致するかどうかをテストします。


const regex = /^\d{4}-W\d{2}$/;