2013年5月28日火曜日

jQuery UI Datepicker 土曜 日曜の色をCSSだけで変更する

jQuery UI Datepickerは、土日まとめて色を変える場合には ui-datepicker-week-end というclassが用意されていますが、土曜と日曜のそれぞれの色を変更したい場合は、first-childとlast-childを遣うことでそれぞれ日曜日と土曜日の色を指定できます。


表示するページのスタイルシートに次のコードを追記してください。
table.ui-datepicker-calendar tbody td:first-child a.ui-state-default{
    color: #F00;
}
table.ui-datepicker-calendar tbody td:last-child a.ui-state-default {
    color: #00F;
}
祝日指定がない場合は、CSSだけで十分なので、手軽に変更できます。 ここでは、文字色だけを変更していますが、当然、背景なども変更可能です。 曜日名を変更する場合は下記のようにすればOK。
table.ui-datepicker-calendar thead th:first-child {
    /* 日曜日のスタイルを記述 */
}
table.ui-datepicker-calendar thead th:last-child {
    /* 土曜日のスタイルを記述 */
}

ただし、first-child、last-childは古いブラウザでは正しく表示されませんので、注意が必要です。
お仕事上、古いブラウザに対応必須とか休日も必要という方は、CSSだけでは無理ですので(たぶん)、JavaScriptで対応する必要があります。

 たとえばWindowsXP+IE8ではfirst-child(日曜日)は表示されますが、last-child(土曜日)は認識されません。 個人的にはざまあみろ、古いIEは利用しているヤツが悪い、っていうかいい加減にしろやマイクロソフト!という気分ですので、IEのことなど知っったことか、という気分ですが、お客様のサイトの時とかはそういうわけにもいきませんよね。っていうか取り消し線引いた意味があんまりありませんね。IE嫌い。迷惑。

気が向いたら、IE対策のhackも追記しますね(向かない)。

追記
IE7、IE8はこれでOK。
でもIE6はこれだと土日同じ色になっちゃうのでダメですけども。
table.ui-datepicker-calendar tbody td.ui-datepicker-week-end a.ui-state-default {
    color: #00F;
}
table.ui-datepicker-calendar tbody td:first-child a.ui-state-default{
    color: #F00;
}
table.ui-datepicker-calendar tbody td:last-child a.ui-state-default {
    color: #00F;
}
あれこれいじっているよりGCalHolidaysを導入した方が早そうですけども。

6 件のコメント:

  1. はじめまして。色々検索していたらこのブログにたどり着きました。
    datepickerのcssカスタマイズについて、特定の日(8月29日と8月31日)だけ色を変えることはできるのでしょうか。
    特定日のクラスがあるのでしたら教えていただけると助かります。

    返信削除
    返信
    1. はじめまして。
      今、手元に確認できる環境がないので確実ではないですが、CSSのみではちょっと難しいかと思います。
      「特定の日」を指定して、JavaScriptでclassを追記することで、対応可能かと思います。下記ページが参考になるかと。
      https://www.of-mokuren.com/blog/archives/737
      http://qiita.com/mnrck07/items/f8d9b004f5505494e3ce
      http://acro-engineer.hatenablog.com/entry/20111117/1321575622

      削除
    2. 教えていただいたページを参考にjsファイルを直したらうまくいきました。
      ありがとうございました。

      削除
    3. お役に立てたようでなによりです(^ ^)

      削除
  2. このコメントは投稿者によって削除されました。

    返信削除
  3.  
     はじめまして!^^

    So-netブログでカスタマイズしたく、ググっていたら、
    OBOROさんの当ページに辿り着きました。

    早速、実践させて頂き、無事に変更できました!↓

    http://donmaru.blog.so-net.ne.jp/

    有難うございました♪m(_ _)m

    返信削除