2

だから、私は Stefan Gabos の Zebra DatePicker プラグインを使用しています。これは素晴らしいプラグインです。Spry Validation ではうまく機能しないことがわかりました。これを機能させるために使用します。

そのため、フォームが送信され、値なしで検証が実行されると、エラーメッセージが原因でフォームが押し下げられます。問題ない。この問題は、DatePicker アイコンが親要素またはテキスト フィールドに基づいて位置を更新しないことに伴います。プラグインの作成者は、datepicker.update() を呼び出すことを提案していますが、これを実装しても結果は得られません。

ここに私のjsコードがあります:

$(document).ready(function() {
$('input.datepicker').Zebra_DatePicker({
    format: 'M d, Y',                                      
    direction: true,
    disabled_dates: ['* * * 0,3,6']

});

    });

html は次のとおりです。

<input name="specific_date" type="text" class="datepicker" />

どんな助けでも大歓迎です-それは簡単な解決策だと確信していますが、私の人生では、うまくいくか役立つものは何でも見つけることができます. 前もって感謝します！

4

3 に答える 3

5

別の解決策は、アイコンを非表示にすることです。

$(document).ready(function() {
 $('#datepicker').Zebra_DatePicker({"show_icon" : false});
});

その後、CSS を使用して元に戻すことができます (つまり、Zebra Datepicker を使用せずにアイコンを再実装します)。これにより、その位置を更新する必要がまったくなくなります。

#datepicker{ 
 background-image: url('zebra_datepicker/calendar.png'); 
 background-position:98% 50%; 
 background-repeat:no-repeat; 
 cursor: pointer; 
}

私には、これはそもそもよりシンプルなデザインのように思えます (Zebra Datepicker アイコンが通常 JavaScript を介して配置される理由についてのデザインの理論的根拠はわかりません)。

于 2012-11-13T13:47:58.943 に答える
3

Zebra Datepickerのドキュメントに記載されている更新方法は、適切な出発点のように思えます。これまでに何を試しましたか？アイコンの再配置をトリガーするイベントにバインドする必要があります。たとえば、次のようにすると、ブラウザ ウィンドウのサイズが変更されるたびにアイコンの位置が更新されます。

$(window).resize(function () {
  var datepicker = $('#datepicker').data('Zebra_DatePicker');
  datepicker.update();
});
于 2012-11-13T12:19:06.067 に答える