6

あるいは、html5 で別のフィールドの値に対して検証することは可能ですか?

一般的な例は、「開始日」が「終了日」以下の日付範囲を選択することです。以下は、構文で要素参照を使用できる場合にのみ、値間の望ましい関係を説明します。

<input type="date" name="from" max="to">    //todo: populate with ~to.value
<input type="date" name="to" min="from">    //todo: populate with ~from.value
4

5 に答える 5

3

ここで、Web コンポーネントは非常に便利ですが、まだすべてのブラウザーで完全にサポートされているわけではありません。

アイデアは、次のように 2 つの子 (from と to) を持つ単純な html 要素を作成することです。

<div id="fromToDate">
    <div></div>
    <div></div>
</div>

次に、日付ピッカーの外観を定義するテンプレートを作成します。

<template id="fromToDateTemplate">
    <label for="fromDate">from</label>
    <input type="date" class="fromDate" select=":first" required="" />
    <label for="toDate">to</label>
    <input type="date" class="toDate" select=":last" required="" />
</template>

選択パラメーターは、値がどこから取得されるかを定義するため、最初の入力フィールドは「#fromToDate」から最初の div を取得します。

最後に、「シャドウ ルート」にデータを入力し、ロジックを定義する必要があります。

var shadow = document.querySelector('#fromToDate').webkitCreateShadowRoot(),
    template = document.querySelector('#fromToDateTemplate');
shadow.appendChild(template.content);


shadow.querySelector(".fromDate").addEventListener("change", function (e) {
    var to = this.value;

    shadow.querySelector(".toDate").setAttribute("min", this.value);
});

template.remove();

最後に 2 つの入力フィールドがレンダリングされ、最初の日付ピッカーで日付を選択すると、2 番目の日付ピッカーは下位のデータを選択できません。

フィドラーの例: http://jsfiddle.net/cMS9A/

利点:

  • ウィジェットとしてビルド
  • 再利用が容易
  • ページを破らない
  • 独立してスタイリングできる

短所:

  • まだすべてのブラウザーでサポートされているわけではありません

今後の読書:

于 2013-10-29T14:47:14.727 に答える
0

純粋な HTML ソリューションに向けて物事が進んでいるのを見るのは素晴らしいことですが、当面の間、moment.js を使用してギャップを埋めることを検討してみませんか?

http://momentjs.com/

そこには良い例がたくさんあり、便利なユーティリティメソッドがたくさんあります。

于 2013-11-04T16:42:19.613 に答える
-1

他の入力値に基づいて入力値を検証する方法がないことを心配しています。古き良きJavaScriptのみ。

しかし<input type="range" …&gt;、最小限のステップ (1 日 / 1 時間 / …) を使用して設定することもできます。次に、同じ名前の属性を使用minして値を付けることができます。max

于 2013-10-29T13:42:15.127 に答える