jQueryUIのdatepickerを使ってハマった所 その1

公開日: : 最終更新日:2011/05/27 jQuery

jQueryUIのdatePickerは簡単に日付選択のライブラリを設置できて便利なんですが、デザインをいじるのがめちゃくちゃ大変です。
今回はそんな話。

★カレンダーの表示幅を広げたい(特に複数月のカレンダーを出しているとき)

これが難解・・・。まだ初期表示はbeforeShow()でこんな感じに書けば出来ます。

例)表示幅を38emにしたい場合。

$("#calendar").datepicker({

  beforeShow: function(input,inst){

    setTimeout(function(){
      $(input).datepicker("widget").attr("style",datepicker_div.attr("style").replace(/width: [0-9]+em;/,"width: 38em;"));
      //別にこれでも問題はないですよ。
      $(input).datepicker("widget").css("width","38em");
    },10);
  }
});

見た感じ行けます。
ただ、月を変更すると戻るんですよねー・・・。
で、じゃあそれはonChangeMonthYear()で書けばいいじゃんと言われそうなんで書いてみます。

$("#calendar").datepicker({
  onChangeMonthYear: function(year,month,inst){
    setTimeout(function(){

      $(this).datepicker("widget").attr("style",$(this).datepicker("widget").attr("style").replace(/width: [0-9]+em;/,"width: 38em;"));
      //別にこれでも問題はないですよ。
      $(this).datepicker("widget").css("width","38em");
    },10);
  }
});

さて、これで動かしてみると・・・
Chromeとかでは普通に見えますが、Firefoxで見ると違和感が出ます。
「ガチャ」っとなるというか、表示がカタッとしますよね。
どうしてかというと、一旦月を変えたときに表示されるHTMLに対して確かにこれでwidth書き換えしているんですが・・・
再度書き換え直されている模様です。

トレースしていくと、ここら辺が犯人。

//(jquery-ui ver 1.8.8 665行目あたりから始まる_updateDatepicker()メソッドの693行目)

          var width = 17;
          if (cols > 1)
               inst.dpDiv.addClass('ui-datepicker-multi-' + cols).css('width', (width * cols) + 'em');
          else
               inst.dpDiv.removeClass('ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4').width('');

ここのif文がtrueになったとき!最後の.css()で上の固定長になっている「17 * (表示月数) em」と設定されてしまうので、結果的に
一旦これで戻されてしまいます。

どういう流れになっているかとまとめるとー

1.beforeShow()で生成された#ui-datepicker-div のstyleを書き換える(ここで希望通りのサイズになる)
2.月を移動させる
3.1で定義したサイズのまま新しい月のデータが入る
4._updateDatepicker()内の処理が走り一旦サイズがもとに戻される
5.onChangeMonthYear()のsetTimeout()内に書いた処理でまた希望通りのサイズに変更される

4->5の流れのところでガタッとした感じになるんですね・・・・。
というか固定長で17っていれないでよ・・・。設定変えたいよ・・・。

苦し紛れの回避方法ですが、一旦表示を消しておいてから表示するという方法もあります。

$("#calendar").datepicker({
  onChangeMonthYear: function(year,month,inst){
    setTimeout(function(){

      $(this).datepicker("widget").attr("style",$(this).datepicker("widget").attr("style").replace(/width: [0-9]+em;/,"width: 38em;"));
      //別にこれでも問題はないですよ。
      $(this).datepicker("widget").css("width","38em").show();  // < - ここで再度表示
    },10);
    $(this).datepicker("widget").hide();  // <- ここのタイミングで一旦消す
  }
});

これ一瞬表示が消えるのが難点です。
アニメーションでごまかしてください(ぇ

ということで、皆さんjQueryUIでdatepickerを使うときはご用心。

関連記事

no image

jQuery.locationHashをjQuery公式pluginページに追加

HTML5では不要になりそうな技術なので、そこまで必要じゃない気がする・・・?とは思いながらも最近p

記事を読む

no image

jQuery1.4.4が登場。新メソッドも追加。

jQueryの新しいバージョンが出た模様です。1.4.4。 jQuery: » jQuery 1.4

記事を読む

jQueryUIの次期Version(1.9)にはToolTipが標準搭載される模様?

ツールチップのプラグインを探していて、現状でいけば最適解はきっと「qTip」だろうなぁと思って探して

記事を読む

Comment

  1. Daniel より:

    Kick the tires and light the fires, problem ofallifciy solved!

  2. You mean I don’t have to pay for expert advice like this anymore?!

  3. Già rivederlo nella versione “pulita” dell’edizione DVD mi aveva fatto riscoprire emozioni che non ricordavo da quando ero bambino… mannaggia a me, perché non ho aspettato a fare l’acquisto ?!? :)Comunque mi accodo al commento di Wolf… voglio vedere quel rimasterizzato!!! :)

  4. Henrietta より:

    je cite &l&d;ouanbsp;qudu » Enfin et surtout roulez dans un véhicule électrique, c’est comme écouter Vivaldi au coin du feu: un bien être évident.Pas si evident car les bruits de roulements du au type revetement sonts important et dépendent de l’insonorisation de la caisse et de l’habitacle (pour les bruit des autres vehicules)

  5. Search is enhanced DNS. As long as we need DNS Google will make a ton of money. Social is not a threat to Google, since users will not share stuff that matters owing to privacy concerns. But mobile could be a threat, although that has not yet come to pass.

  6. car insurance より:

    Ser riktigt bra ut.. Är redan en flitig användare av sidan och det kommer inte bli mindre :)50kr är ju fullt rimligt med tanke på allt arbete som ligger bakom, dock känns en veckal lite lite. Finns det möjlighet skulle man kunna ha ett alternativ 100kr för en månad?

  7. Hola, Buenas tardes! Tengo un problema he instalado gpodder en linuxmint debian y cuando se acaba de descargar un capitulo d'un podcast se me cierra y tengo que volver a ejecutar el programa, alguien me puede decir porque se cierra el programa? Saludos.

  8. http://www./ より:

    I’ve know forever, my mother worked in a meat packing plant over 40 yrs ago. Even back then she would say “if you saw how hot dogs and bologna was made, you’d never eat them!” The past few years I have been really researching processed foods and came to the conclusion, the people that are suppose to regulate these foods so we are not poisoned do not care!!!

  9. Tess より:

    Tja, es ist nicht jedem gegeben, zu lesen: &#drp0;Kin8er2ornog2afie” wurde und wird wahrscheinlich nie durch Wikipedia verbreitet (siehe meinen Post ganz oben). Es ist natürlich nett eine Strafanzeige zu stellen und damit publikumswirksam die “Partei” zu promoten. Dass das moralisch verwerflich ist, da die echten Opfer verhöhnt werden, ist den Verursachern egal. Hauptsache sie bekommen Publicity!

Message

メールアドレスが公開されることはありません。

Target:mbox

自腹で購入した商品色々レビュー中!

商品紹介・レビュー記事特集!

Target:static mbox(mbox create

no image
Nintendo Switch で使える激安USB 3.0ケーブル

Nintendo Switchを買いました!とりあえず色々まずはやって

AMPで作ったページを実際にGoogle検索結果経由でみた時と同じキャッシュ表示にする方法

今日は技術的な話。AMPページ対応を行った人も最近増えてきたと思うので

分散投資ロボアドバイザーのTHEOを大体半年間回したら利率10%近くまでになったので、トランプさんありがとうと思った

(こちらの記事は私が独自に当サービスを使ってみた結果の報告です。特にT

Macでの作業効率アップ!nativefierを使ってWebアプリをアプリケーション化

Console heaven / bartosz.maciejew

no image
2016年の目標

新年明けましておめでとうございます。 年末年始は色々とバタバタしまし

→もっと見る

PAGE TOP ↑