【bootstrap-datetimepicker/IE8での不具合】

Question

【bootstrap-datetimepicker/IE8での不具合】

javascriptまったくの初心者です。
ASP.NETで作成しているWEBアプリの日付選択で嵌っております。
わかりにくい説明ですが、どなたかご教示頂ければ幸いです。

【不具合内容】
IE8でbootstrap-datetimepickerで月選択を行うと、
「現在年-1 / 12月」と表示される

使用しているピッカーは、年選択→月選択→日選択とウィジェットが切り替わっていくものです。
月を選択すると、どの月を選択しても年が-1され、12月が選択された状態で日付選択画面に遷移してしまいます。
年/日選択はなんの問題もありません。
IE9以上 / 他のブラウザでは発生しません。

【開発環境】
VS2013
ASP.NET

【使用しているもの】
Eonasdan/bootstrap-datetimepicker
version : 4.14.30
リンク内容https://github.com/Eonasdan/bootstrap-datetimepicker/tree/master/src/js

■jQueryバージョン
1.10.2

■bootstrapバージョン
Bootstrap.js v3.3.5

【その他】
moment.js version : 2.9.0
moment-with-locales.js
html5shiv.js version 3.7.3
Modernizr.js version2.8.3
ie8.js http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js

IE8にはindexOfメソッドが実装されていないとのことなので、実装処理を以下のように
ヘッダに記述しています。

 <%-- IE8 IndexOf対応 --%>
<!--[if lte IE 8]>
<script type="text/javascript">
    if (!Array.indexOf) {
        Array.prototype.indexOf = function (target, index) {
            //indexが数値かどうかの判断
            if (isNaN(index)) {
                index = 0;
            }
            if (typeof target.length === 'undefined') {
                return -1;
            }
            for (var i = index; i < target.length; i++) {
                if (this[i] === target) {
                    return i;
                }
            }
            return -1;
        }
    }
</script>
<![endif]-->

【原因だと思われる場所】
上記記載のbootstrap-datetimepicker/923行目
selectMonth: function (e) ｛｝内
var monthがIE8の場合は必ず[-1]で取得されてきます。
IE9以降ですと、[選択した月-1]という値で取得されてきます。

selectMonth: function (e) {
    //IE8の場合、以下のmonthが正しく取得出来ない
    var month = $(e.target).closest('tbody').find('span').index($(e.target));
    viewDate.month(month);
    if (currentViewMode === minViewModeNumber) {
        setValue(date.clone().year(viewDate.year()).month(viewDate.month()));
        if (!options.inline) {
            hide();
        }
    } else {
        showMode(-1);
        fillDate();
    }
    viewUpdate('M');
},

解りにくい説明で恐縮ですが、ご教示頂ければと思います。

Answer 1

//ヘッダー部に以下の記述で実装

<%-- IE8 IndexOf対応 --%>

<!--[if lte IE 8]> <script type="text/javascript"> if (!Array.indexOf) { Array.prototype.indexOf = function (elem /*, fromIndex */ ) { 'use strict'; if (this == null) { throw new TypeError(); } var n, k, t = Object(this); var len = t.length >>> 0; if (len === 0) { return -1; } n = 0; if (arguments.length > 1) { n = Number(arguments[1]); if (n != n) { n = 0; } else if (n != 0 && n != Infinity && n != -Infinity) { n = (n > 0 || -1) * Math.floor(Math.abs(n)); } } if (n >= len) { return -1; } for (k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); k < len; k++) { if (k in t && t[k] === elem) { return k; } } return -1; }; } </script> <![endif]-->

Answer 2

<meta http-equiv="X-UA-Compatible" content="IE=edge">

この記述してますか？

Comments

[mayhem]

回答ありがとうございます。
ご指摘頂いたレンダリングモードの記述はしております。

IE8なので配列取得がクサいとは思っていたのですが、やはりその通りで自己解決致しました。
回答ありがとうございました。

Answer 3

これと同じ問題でしょうか。。。
http://stackoverflow.com/questions/29713186/bootstrap-datetimepicker-not-woking-in-ie8

IE8は何かと大変ですね。テスト工数とアクセス数の割合を考えると、もうサポートブラウザから外してもいいとおもうんですけどね。。。

Comments

[mayhem]

回答ありがとうございます。
ご提示頂いた場所、当方でも見ておりましたが違いました。
結果的にはindexOfの実装に問題がありました。

>>IE8は何かと大変ですね。テスト工数とアクセス数の割合を考えると、もうサポートブラウザから外してもいいとおもうんですけどね。。。

まったくおっしゃる通りだと思います。
当方、WEBデザインをやっておりまして、オープン系の開発に転職してまだ数ヶ月ですが当たり前の用に社内でIE8で統一している企業がこんなにも多いものかと愕然としています。

日々、レガシーブラウザと戦っている方々に敬意を表します(`・ω・́)ゝ