選択後にブートストラップ日付ピッカーを非表示にする


97

日付を選択した後にカレンダーを非表示にするにはどうすればよいですか?使える機能はありますか?以下の私のコード:

$('#dp1').datepicker({
    format: 'mm-dd-yyyy',
    startDate: '-15d',
    autoclose: true,
    endDate: '+0d' // there's no convenient "right now" notation yet
});

任意の助けいただければ幸いです。


6
これがライブラリのデフォルトの動作ではないのはなぜですか?
スポーツ

回答:


156

イベントchangedate()を使用して、日付が変更された日時を追跡し、選択後にdatepicker('hide')を非表示にするメソッドを使用できますdatepicker

$('yourpickerid').on('changeDate', function(ev){
    $(this).datepicker('hide');
});

デモ

更新

これはのバグでしたautoclose: true。このバグは最新のマスターで修正されました。参照してくださいCOMMIT。から最新のコードを入手GitHub


7
現在のビューモードが「日」であるかどうかをさらに確認することをお勧めif (ev.viewMode === 'days') {$(this).datepicker('hide');}します。おそらく、月または年を選択した後に日付ピッカーを非表示にしたくないためです}
turan

1
autocloseがデフォルトでfalseに設定されているようです... $(".date").datepicker({... autoclose: true, ... });うまく動作します!!!
ダニ

45

それが誰かの助けになるなら、ブートストラップ日付ピッカーのバージョン2.0は、受け入れられた回答で動作しなくなります。

ここに私がそれを私の仕事にした方法があります:

$('yourpickerid').datepicker({
    format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
    $(this).datepicker('hide');
});

http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedateを参照してください


バージョン2はありますか?私はGithubの上の最新のリリースとしてv1.6.4を参照してください
garryp

イベントを手動で処理する代わりに、autoclose(@Salimの回答または更新された承認済みの回答を参照)を使用します。日付が変更されたときに日付ピッカーを非表示にすると、日付を入力しようとすると、望ましくない動作が発生する可能性があります。
偏った


3

カレンダーの動作を全般的にオーバーライドしたい場合は、Datepicker関数を編集してみてください(この例では82行目です)。

から

    this.autoclose = false;

    this.autoclose = true;

すべてのカレンダーインスタンスが同じように動作するようにしたかったので、うまくいきました。


2
jsライブラリのデフォルトプロパティを変更する必要はありません。呼び出すときに、オブジェクトのプロパティとして関数に渡すことができます。例:$( '#dob')。datepicker({format: 'dd / mm / yyyy'、autoclose:true});
Zeeshan

3

この行を使用すると、入力要素の非表示イベントをブロックして問題を停止できます。

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
    e.preventDefault();
    e.stopPropagation();
});


どうも !日付の選択後に入力が非表示になったために怒っていましたが、これで問題が解決しました。乾杯!
spacebiker 2017年

3
  1. 単に開く bootstrap-datepicker.js
  2. 見つける: var defaults = $.fn.datepicker.defaults
  3. セットする autoclose: true

プロジェクトを保存して更新すると、これが実行されます。


2

ブートストラップ4では、「autoHide:true」を使用します

$('#datepicker1').datepicker({
    autoHide: true,
    format: 'mm-yyyy',
    endDate: new Date()
});

いい答えAnkit
Singh

1

日付選択時にdatetimepickerを閉じる(datetimepickerは日付と時刻を表示します)

$('.datepicker').datepicker({
    autoclose: true,
    closeOnDateSelect: true
}); 

1
$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});

0

私は完璧な解決策を得ました:

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});

0
$('.datepicker').datepicker({
    autoclose: true
}); 

この質問の別の答えは、あなたの答えとまったく同じです。OPのautoclose: trueサンプルコードにもこれがあります。
93196.93

0

datetimepickerに変更し、形式を「DD / MM / YYYY」に変更しました

$("id").datetimepicker({
    format: 'DD/MM/YYYY',
}).on('changeDate', function() {
    $('.datepicker').hide();
});

0

少なくとも私が使用しているバージョン2.2.3 autoCloseでは、の代わりに使用する必要がありますautoclose。大文字小文字の問題。


0

ソースコードbootstrap-datepicker.jsを変更できます。のthis.hide();ように追加

  if (this.viewMode !== 0) {
    this.date = new Date(this.viewDate);
    this.element.trigger({
        type: 'changeDate',
        date: this.date,
        viewMode: DPGlobal.modes[this.viewMode].clsName
    });
    this.hide();//here
 }

0

それでも私はフォーマットを書いていても示すクロックに問題が発生した:「YYYY-MM-DD」

私は設定する必要がpickTime: falseあり、変更後- >非表示にフォーカス- >表示する必要がありました

$('#VBS_RequiredDeliveryDate').datetimepicker({
  format: 'YYYY-MM-DD',
  pickTime: false
});

$('#VBS_RequiredDeliveryDate').on('change', function(){
    $('.datepicker').hide();
});

$('#VBS_RequiredDeliveryDate').on('focus', function(){
    $('.datepicker').show();
});

0

日時ピッカー用

$('yourpickerid').datetimepicker({
        format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
        $(this).datetimepicker('hide');
});

0

これをdatetimepickerに使用してください、それはうまくいきます

$('#Date').data("DateTimePicker").hide();

0

これは言及されていませんが、これが私のために修正したものです:

switchOnClick: true
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.