2

p:calendarに土日祝日のCSSを適用したい。jQuery を使用してイベントを呼び出そうとして beforeShowDayいますが、条件に基づいて css を設定しています。

<script>
    $(document).ready(function(){
       $(".hasDatepicker").datepicker("option", "beforeShowDay", function (date) {
          //If condition true
          return [true,'holidays'];
          //else
          return [true,''];
       });
    });     
</script>

<style>
    .holidays {background-color: wheat;}
</style>

<h:form prependId="false">
      <p:calendar/>
</h:form>

しかし、イベントは発生していません。私が見逃しているもの、または他のアプローチはありますか？

4

1 に答える 1

5

beforeShowDay属性を使用する必要があります

beforeShowDay : 日付表示をカスタマイズするために使用される、日付を表示する前に実行するコールバック。

beforeShowDay JavaScript コールバックを使用して、各日付の外観をカスタマイズします。この関数は、2 つの値を持つ配列を返します。最初の値は日付が有効として表示されるかどうかを示すフラグで、2 番目のパラメータは日付セルに追加するオプションのスタイル クラスです。次の例では、火曜日と金曜日を無効にしています。(PrimeFaces ユーザーガイド 50 ページ)

<p:calendar value="#{dateBean.date}" beforeShowDay="tuesdaysAndFridaysDisabled" />


function tuesdaysAndFridaysDisabled(date) {
    var day = date.getDay();
    return [(day != 2 && day != 5), '']
}

jQuery ソリューション

Primefaces 要素を変更せずに解決したいが、jquery datepickerbeforeShowDay属性を使用する場合は、このチュートリアルPrimefaces カレンダー – ハイライト日付を参照してください。

于 2012-11-15T09:04:44.250 に答える