jQuery UI のdatepickerのみを使用していて、これのテーマを動的に変えたいとき、テーマごとのCSSをダウンロードしておいて変更することになりますが、jQuery UI のCSSはすべてのWidgetsやEffectsのための要素を含んでいるため、ミニファイでも27KBと重くなります。今回の例では、datepickerのみの見た目を変えるだけなので、オリジナルのテーマを差分として外部CSSに書き出せば、300B程度のサイズになります。

(1)のボタンクリックで、テーマを「mint-choc」に変更します。(2)のボタンで元の「ui-lightness」に戻すことができますが、こちらのCSSにサイズ情報が無いようで、サイズが戻りません。(3)のオリジナルテーマにはサイズ情報があり、(4)では、(3)のCSSをリセットしているので、(1)から元に戻す場合は、(1)→(3)→(2)→(4)となります。実際の手間としてはリロードした方が早いですが。

jQuery UI Datepicker

テキストフィールドをクリックして、 日付入力:

ボタンをクリックして、 日付入力:  

アイコン画像をクリックして、 日付入力:  



 
 
 

戻るボタン