Bootstrap DateTimePicker：一次打開一個datetimepicker

我有一個包含多個datetimepickers的html模板。如果我點擊按鈕打開一個datetimepicker，然後點擊另一個打開新的，第一個保持不變（它不關閉）。我希望一次只能打開一個datetimepicker。Bootstrap DateTimePicker：一次打開一個datetimepicker

隨刻2.5（矩與-LANGS）工作，但現在它似乎並沒有被工作一樣，在這裏有一個引導的DateTimePicker 2.5 JsFiddle Demo

$('#datetimepicker1, #datetimepicker2').datetimepicker();

這是標準行爲。

有沒有人有任何想法來解決這個問題？

注：我使用Eonasdan自舉的DateTimePicker版本3.0.3與時刻2.8（時刻與 - 語言環境），jQuery的1.9和Bootstrap 3

什麼棘手的下面是一個自舉的DateTimePicker附加到<body>一個<div>對於每個與其觸發器按鈕完全無關的已初始化的datetimepicker。

來源

2014-09-22 henser

我已經嘗試了幾件事情，甚至絕望的措施，如關閉「打開datetimepicker按鈕」點擊所有datetimepickers，並觸發點擊相同的按鈕來打開特定的選擇器。這沒有奏效。 – henser 2014-09-22 16:28:29

儘管Joel Lubrano的答案適用於預加載的小部件......它缺少使用動態生成的（通過JS）工作的可能性。同時，我已經設法從組件內部解決這個問題，通過添加一行來解決這兩個問題。

在組件的JS內部找到picker.show函數（在第1150行取決於版本（在v1.3.1中））...）在該函數的last else語句中，將下列行作爲該語句的第一條指令。

$('.picker-open').hide().removeClass('picker-open');

，就是這樣。之後，您只需要將DTP初始化封裝在函數中，並在文檔準備就緒後以及動態生成的窗口小部件之後進行調用。

function DTPinit(){ 
    $('.dtp').datetimepicker(); 
} 

$(function(){ 
    DTPinit(); 
    $('#dtp_gen').on('click', function(){ 
     $('body').append('<div class="form-group"><div class="input-group dtp date""><input type="text" class="form-control datetimepicker" /><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>'); 
     DTPinit(); 
    }); 
});

在這裏你有一個JSFiddle展示了我上面描述的內容。 BS-DTP組件正在被加載到小提琴JS容器中進行編輯。

來源

2014-10-03 09:40:50 henser

試試這個：

$('.date').datetimepicker(); 
$(document).ready(function() { 
    // Select all elements with the 'date' class 
    $('.date').on('dp.show', function() { 
     $('.date').not($(this)).each(function() { 
      $(this).data("DateTimePicker").hide(); 
      // $('.date').not($(this)) selects all the .date elements except 
      // for the one being shown by the datetimepicker dp.show event. 
      // The dp.show event is fired when a new datetimepicker is opened. 
      // We use the .data("DateTimePicker") to access the datetimepicker object 
      // (we have to use a jQuery each loop in order to access all the 
      // datetimepickers. 
      // .hide() -- we hide it. 
     }); 
    }); 
});

這應該只允許一個的DateTimePicker是在同一時間打開。

來源

2014-09-22 17:14:57

這很適合我正在尋找的東西。謝謝！ – henser 2014-09-22 19:22:43

只是所以我理解得很好......你能詳細解釋一下爲什麼這個工作原理以及爲什麼數據值必須完全是「DateTimePicker」？ – henser 2014-09-22 19:28:51

如果您仔細查看源代碼（接近底部），您將看到'$ .fn.datetimepicker = function（options）{this.if（function（）{ var $ this = $（this）， data = $ this.data（'DateTimePicker'）; if（！data）{this。數據（'DateTimePicker'，新的DateTimePicker（this，options））; } }）; };'這似乎暗示「DateTimePicker」是庫的作者選擇存儲datetimepicker對象的關鍵。我絕不是一個JavaScript專家，但希望這有助於回答你的問題的一部分。 – 2014-09-22 19:59:36

Bootstrap DateTimePicker：一次打開一個datetimepicker

回答

相關問題