一个页面中的多个引导日期选择器

我有一个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动态创建的，我相信这就是问题 –

一个页面中的多个引导日期选择器

回答

相关问题