web-dev-qa-db-ja.com

Bootstrap選択後にdatepickerを非表示

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

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

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

jquerytwitter-bootstrapdatepicker
88
jheul

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

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

デモ

UPDATE

これはautoclose: trueのバグでした。このバグは最新のマスターで修正されました。見る COMMIT。から最新のコードを入手する GitHub

144
Felix

誰かの助けになっている場合、bootstrap datepickerのバージョン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 を参照してください

42
Ola
$('#input').datepicker({autoclose:true});
25
Salim

次の行によって、入力要素の非表示イベントをブロックして、問題を停止できます。

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
    e.preventDefault();
    e.stopPropagation();
});
3
papacho
  1. bootstrap-datepicker.jsを開くだけです
  2. 検索：var defaults = $.fn.datepicker.defaults
  3. autoclose: trueを設定

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

3
user3615318

一般的に、カレンダーの動作をグローバルにオーバーライドする場合は、Datepicker関数（私の例では82行目）を編集してみてください。

から

    this.autoclose = false;

に

    this.autoclose = true;

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

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

日付が選択されたときにdatetimepickerを閉じる（datetimepickerは時間とともに日付を表​​示）

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

に変更しました 日時ピッカー そしてフォーマット 「DD/MM/YYYY」

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

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

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

私がフォーマットを書いたとしても、時計にまだ問題がある：'YYYY-MM-DD'、

pickTime: falseを設定してからchange-> hideに設定しなければなりませんでしたfocus-> showに設定しました

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

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

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

ソースコードbootstrap-datepicker.jsを変更できます。 neのような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
Vladimir Kulakov
$('.datepicker').datepicker({
    autoclose: true
});
0
user3706926

日時ピッカー用

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

少なくとも私が使用しているバージョン2.2.3では、autoCloseの代わりにautocloseを使用する必要があります。レターケースが重要です。

0
TimA

これをdatetimepickerに使用すると、正常に動作します

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