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

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

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

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

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

環境

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

現象

何故かdatepickerがinlineになる。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を解除することはできんのか。これは調べている途中。

datepickerをクリックしても閉じない？そんなあなたに・・・

autocloseを渡してあげると喜びます（あなたが）

$('input').datepicker({
    format      : 'yyyy/mm/dd',
    language    : 'ja',
    autoclose   : true, // これ
    clearBtn    : true,
    clear       : '閉じる',
    startDate   : (obj.startDate) ? 'today' : ''
});

datepickerで日付を変更後に何かしたい！！！

changeDateをイベントにセットすればおｋ

$('input').datepicker({
    format      : 'yyyy/mm/dd',
    language    : 'ja',
    autoclose   : true,
    clearBtn    : true,
    clear       : '閉じる',
}).on({
    changeDate : function() {
        // なにかしらの処理
    }
});

datepickerでも選択してほしくない日付ってあるんですー！（＞＜ （訳：datepickerで選択させたくない日付を設定する方法）

なんかテンションがおかしいお（^ω^ = ^ω^）おっおっおっ

先程からdatepickerを連チャンしていますが、せっかく色々検証したのでハマったところをバシバシあげていくお。

さて、日付を入力してpostすると保存するシステムで、view側で予めdatepickerの特定の日付をdisabledにできないかなーと思ったので、探してみるとあったからメモ。

var dateFormat   = 'yy/mm/dd';
var disableDates = ['2015/01/01', '2015/01/03']; // ここがミソ
$("#checkInString").datepicker({
    format      : dateFormat,
    language    : 'ja',
    autoclose   : true,
    clearBtn    : true,
    clear       : '閉じる',
    changeMonth : true,
    changeYear  : true,
    startDate   : 'today',
    beforeShowDay : function(date) {
        var disableDate = $.datepicker.formatDate(dateFormat, date);
        return ( disableDates.indexOf(disableDate) == -1 );
    }
});

こうすることでdatepicker呼び出し時に、beforeShowDayが日付にdisabledをつけてくれるか判定してくれます。

んで、ミソ部分にサーバから配列で日付を渡してあげればview側でそもそも入力させないviewの完成どす。

Apacheでconfigファイルをチェックしたらエラーが２つ

photo by The U.S. Army

雑多メモ

$ apachectl -t
httpd: apr_sockaddr_info_get() failed for test_server
httpd: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1 for ServerName
Syntax OK

構文的にはおｋだけど色々やることがあるっぽい

httpd: apr_sockaddr_info_get() failed for test_server

これは、/etc/sysconfig/networkでお前「test_server」ってホスト名設定してるだろ？　あれな。/etc/hostsに設定されていないから探すことができないの。

ということで

$ vim /etc/hosts
#################
127.0.0.1   localhost localhost.localdomain localhost4 localhost4.localdomain4 test_server # 最後に追加

#################

これで良し

httpd: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1 for ServerName

ServerNameってディレクティブあるだろ？　お前にそれを設定してほしいの。

$ vim /etc/httpd/conf/httpd.conf
#################
 276 #ServerName www.example.com:80
 277 ServerName 127.0.0.1 # 追加した
#################

設定した結果

再度実行

$ apachectl -t
Syntax OK

おｋでした。

なんか英語のメモがあったからメモしておく

何を覚えようとしていたんだ・・・？？！

• spare time 空き時間
• little over （続く数）ちょっと （例：一年ちょっと a little over a year）
• aware 知っている、気がついている
• algorithms アルゴリズム
• especially ことに、特に、特別
• benefit 利益