web-dev-qa-db-ja.com

Bootstrap日付を選択した後、datepickerが自動的に閉じない

最新のBootstrap datepicker.jsを使用します。ドロップダウンから日付を選択しても、自動的に閉じられないことを除いて、すべて正常に動作します。Webを検索し、次の関数次のような私のJavaScriptで：

 $('#selectDate').datepicker({
    autoclose: true
}).on('changeDate', function (ev) {
    (ev.viewMode == 'days') ? $(this).datepicker('hide') : '';      
});

しかし、Google Chrome Devツールを使用すると、ev.viewmodeが定義されていないことに気付きました。

javascriptjquerytwitter-bootstrapdatepicker
21
AlliceSmash

これを試して：

$('#selectDate').datepicker()
.on('changeDate', function(ev){                 
    $('#selectDate').datepicker('hide');
});

更新：

githubにあるdatepickerの更新バージョンを使用すると、autocloseは正常に機能します。

https://github.com/eternicode/bootstrap-datepicker

21
Mukesh Chapagain

私はautoclose：true、を追加しました（最後に半コンマを付けて動作します）

 $('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    autoclose: true,
})
16
Chaitanya K

上記のどれも私にとってはうまくいきませんでしたが、datepickerのデフォルトオプションをオーバーライドすることは魅力のように機能し、ワンライナーです：

$.fn.datepicker.defaults.autoclose = true;
11
northernman

これを試して：

$('#selectDate').datepicker().on('changeDate', function(ev)
{                 
     $('.datepicker').hide();
});
9
Ibrohim Ermatov

Datepickerを適用したテキストボックスが複数ある場合、古いソリューションで問題が発生する可能性があります。代わりにこれを試してください。

$('.datepicker').datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
}).on('changeDate', function (ev) {
     $(this).datepicker('hide');
});

これを見てください https://github.com/eternicode/bootstrap-datepicker/issues/5

注：jqueryのクラスセレクターを使用していることを忘れないでください。そのため、datepickerクラスをテキストボックスに適用する必要があります。

7
Aniket Bhansali
  1. Bootstrap-datepicker.jsを開くだけです
  2. find：var defaults = $ .fn.datepicker.defaults（私の場合は行1391）
  3. autocloseを設定：true

プロジェクトを保存して更新すると、これでうまくいくはずです。

3
user3615318

私にとっては、bootstrap-datepickerドキュメントのタイプミスであることがわかりました。 「autoclose：true」の代わりに「autoClose：true」です。

それが役に立てば幸い。

2
Nick Verheijen

// 10000％の作業bootstrap-datepicker.jsファイルに移動します

これを検索：

'mousedown touchstart': $.proxy(function(e){
                    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        this.element.find(e.target).length ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )) {
                        this.hide();  //remove this
                    }
                }, this)
            }]
        ];
    },
0
doshi smit

これは私のために働いています。

$(".date-picker").datepicker( {
    format: "yyyy-mm-dd",
}).on('change', function (ev) {
    $(this).datepicker('hide');
});
0
Muzammil Hussain

クラスのデフォルトのdatepickerでdivにカーソルを合わせると。カレンダーコントロールが表示されます。 Mouseleaveでは、表示されなくなります。

 $(document).on("focus", ".defaultdatepicker", function () {

        $(this).datepicker({
            format: 'dd/mm/yyyy',
            todayHighlight: 'TRUE',
            autoClose: true,
        });

        $('#datepicker').css({ "opacity": "1" });
    });

    $('.defaultdatepicker').on('mouseleave', function () {
        $('.datepicker').fadeOut(function () {
            $('.formattedStartDate').attr('class', 'formattedStartDate');

            $('#datepicker').css({ "opacity": "0" });
        });
    });
0
Tumelo Moropane