質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17083questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6954questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    1013questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • ASP.NET

    548questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

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

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,416

mayhem

score 2

【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');
},


解りにくい説明で恐縮ですが、ご教示頂ければと思います。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/08 15:43

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

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

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

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

    キャンセル

0

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

この記述してますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/08 15:43

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

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

    キャンセル

0

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

<%-- 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]-->

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    Bootstrapのbtn-groupがうまく働かない

    Laravelで作っているアプリで、ボタンを横一列に表示したいのですがなぜか縦に並んでしまいます。アドバイスお願いします。 簡単にコードを書くとこんな感じです <td>    

  • 解決済

    Bootstrap Tags Inputの削除

    Bootstrap Tags Inputの便利な機能で、バックスペースを押すと登録してあるタグを1つ削除するとこができるのですが、この機能を無効にするオプションなどあるでしょうか?

  • 解決済

    Bootstrapで、カラムが横に並ばない

    <!Doctype html> <head><https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr

  • 解決済

    bootstrapのfont awesomeが表示されない

    <!Doctype html> <head><link rel="stylesheet" type="text/css" href="https://maxcdn.

  • 解決済

    【js】datetimepickerのonCloseについて

    ヘディングのテキスト###前提・実現したいこと datetimepickerのonCloseを1度だけ処理したいです。 発生している問題・エラーメッセージ コンソールに1行出力

  • 受付中

    Bootstrapにcamera slideshowを設定したらスマフォサイズでハンバーガーメニュー...

    前提・実現したいこと Bootstrapにcamera slideshowを設定したらスマフォサイズでハンバーガーメニューが表示されなくなった。アイコンは表示されるが、メニューバー

  • 解決済

    JSライブラリーの依存関係に関して

    bootstrapとDynaTreeを使用してエクスプローラ的なビューを作成したいのですが、 それぞれで要求しているjqueryライブラリーの版数が違う様で思う様に動作出来ていま

  • 解決済

    datetimepickerの値を取得

    bootstrapのdatetimepickerで変更された値を取得して、取得した日付をもとに一覧の表示をしようとしているのですが 変更された日付が取得できません。 conso

同じタグがついた質問を見る

  • JavaScript

    17083questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6954questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    1013questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • ASP.NET

    548questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。