読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

bootstrapのdatepickerを使っていると、途中inlineのdatepickerになるのはな〜ぜだ♪

JavaScript Bootstrap

スポンサードリンク

陽気なタイトルとは裏腹にすげー苦労しました。


おはようございます(もう午後だけど)。最近、検索するよりソースを読んだほうがはやいんじゃね?と気づいてしまった。隊長です。


タイトル通り、datepickerがあんまりわかんなくて、さらにbootstrapdatepickerになると、何故か使い勝手が変わるという不思議な継承がされているこのbootstrap-datepickerで、朝からオワタ体操を踊っていました。\(^o^)/オワタ/(^o^)\オワタ\(^o^)/オワタ


「もういいや・・・」と諦めかけながらも、ソース読もって思って読んだら解決しましたのでメモ。

環境

  • bootstrap-datepicker.js わがんね(書いてない)
  • jquery.1.11.1.js

現象

何故かdatepickerinlineになる。initの引数で解除できんのかいぃ!!

解決

bootstrap-datepicker.jsの325行目ぐらいに答えがありました。

  • bootstrap-datepicker.js
else if (this.component && this.hasInput){ // component: input + button
    this._events = [
        // For components that are not readonly, allow keyboard nav
        [this.element.find('input'), {
            focus: $.proxy(this.show, this),
            keyup: $.proxy(function(e){
                if ($.inArray(e.keyCode, [27,37,39,38,40,32,13,9]) === -1)
                    this.update();
            }, this),
            keydown: $.proxy(this.keydown, this)
        }],
        [this.component, {
            click: $.proxy(this.show, this)
        }]
    ];
}
else if (this.element.is('div')){  // inline datepicker // ここです!!!
    this.isInline = true;
}
else {
    this._events = [
        [this.element, {
            click: $.proxy(this.show, this)
        }]
    ];
}


どうやら、clickイベントを用意した箇所がdivだとinlineになるらしい。


すかさず、htmlコードをinputタグに変更したらなおりました。( ´ー`)フゥー...


しかし、引数でinlineを解除することはできんのか。これは調べている途中。