一個頁面中的多個引導日期選擇器

我有一個Boostrap日期選擇器的小問題。一個頁面中的多個引導日期選擇器

$('#date1,#date2,#date3,#date4,#date5,#date6').datetimepicker({ 
     language: 'es', 
     weekStart: 1, 
     todayBtn: 1, 
     autoclose: 1, 
     todayHighlight: 1, 
     startView: 2, 
     minView: 2, 
     forceParse: 0 
});

的問題是，從DATE2到date6與jQuery的創建當用戶點擊一個BUTTOM和的DateTimePicker不工作，只有date1.How我能解決這個問題？由於

來源

2016-09-22 Carlos Gomez

或者用'{語言：「ES 」， weekStart：1， todayBtn：真實，自動關閉：真實， todayHighlight：真實， startView：2， minViewMode：2， forceParse：假}'請注意，這將是最好添加一個類，然後選擇那個而不是mu ltiple ID's（使維護更容易） –

添加作爲回答，澄清的類註釋。使用一個類上新添加的元素，然後通過安裝到車體或文件，如創建日期選擇器：

<div class='input-group date datepicker-me-class' id='date2'> 
    <input type='text' class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div>

現在附加到文件：

$(document).on('focus', ".datepicker-me-class", function() { 
    $(this).datepicker({ 
    language: 'es', 
    weekStart: 1, 
    todayBtn: true, 
    autoclose: true, 
    todayHighlight: true, 
    startView: 2, 
    minViewMode: 2, 
    forceParse: false 
    }); 
});

來源

2016-09-22 14:41:32

非常感謝您的幫助！這解決了問題 –

DEMO：它似乎是工作，可能是你已經添加像

language: 'es', 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    todayHighlight: 1, 
    startView: 2, 
    minView: 2, 
    forceParse: 0

創建問題的選項，請檢查是否這些選項是可用的或者不是你所使用的的DateTimePicker版本。

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 
    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> 
 

 
<div class="input-group date" id="datetimepicker1"> 
 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
      </div> 
 
      <div class="input-group date" id="datetimepicker2"> 
 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
      </div> 
 
      <div class="input-group date" id="datetimepicker3"> 
 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
      </div> 
 
      <div class="input-group date" id="datetimepicker4"> 
 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
 
      </div>

來源

2016-09-22 13:29:54

問題是datetimepicker1是唯一存在於代碼中的，其他人是使用jQuery動態創建的，我相信這就是問題 –

一個頁面中的多個引導日期選擇器

回答

相關問題