0

このデモのように、2 つの日付ピッカーを使用した日付範囲があります。

UI 日付ピッカーのデモ

ただし、両方の日付フィールドにアイコントリガーがあります。

ここで、この日付範囲を「オン」と「オフ」の 2 つのラジオ ボタンで無効/有効にしたいと考えています (チェックボックスではありません!)。アイコンも無効/有効にする必要があります (グレーまたはグレー以外)。

これについて多くのことを見つけましたが、完全な解決策ではありません。

これらは私のラジオボタンです：

<input class="radiobutton" type="radio" id="flex_ja" value="noch" name="flex" /><label for="flex">Yes</label>
<input class="radiobutton" type="radio" id="flex_nein" value="nicht mehr" name="flex"/><label for="flex">No</label>

そして、これらは私の日付ピッカー範囲の入力です:

<input id="min_anreise" name="min_anreise" placeholder="Frühestes Anreisedatum"/>
<input id="max_abreise" name="max_abreise" placeholder="Spätestes Abreisedatum"/>

これは、UI デモ サイトの JavaScript コードです。

        $(function() {
    var dates = $( "#min_anreise, #max_abreise" ).datepicker({
        onSelect: function( selectedDate ) {

        $('#Form').validate().element('#max_abreise');
        $('#Form').validate().element('#min_anreise');

            var option = this.id == "min_anreise" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
            }
            });
        });

これを組み合わせて、ラジオボックスで日付を切り替えるにはどうすればよいですか?

アイコンで日付入力を無効にする唯一の方法は次のとおりです。

$( ".selector" ).datepicker({ disabled: true });

そして最後に：

日付が有効で、誰かがこれに記入し、これを無効にすると、入力がクリアされたときに問題ありません。

4

1 に答える 1

0

onclickイベントをラジオ ボタンにバインドします。

イベント ハンドラーで、onclickラジオ ボタンの状態 (「オン」または「オフ」) を確認します。

「オン」の場合:

日付ピッカーを有効にする

「オフ」の場合:

日付ピッカーを無効にする

投稿したコードを使用して、日付ピッカーの有効化と無効化を行うことができます。

$( ".selector" ).datepicker({ disabled: true });
于 2012-06-04T15:03:41.423 に答える