Question

我想添加引导日期选择器，如下面的链接。我试过但是同一个班级制作问题。我怎么能这样做？

    <div id="content">
    a datepicker <input class="datepicker_recurring_start"/>
</div>
<button id="cmd">add a datepicker</button>




  $('#cmd').click(function(){
    $('#content').append('<br>a datepicker <input class="datepicker_recurring_start"/>');
});
$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

Answer 1

当您添加新的日期选择器时，调用$（＆＃34;＃id_of_datepickercontainer＆＃34;）。datepicker（）;函数初始化最近添加的datepicker。这是一个例子：

＆＃13;

function add_fields() {
  var newspan = document.createElement('span');
  newspan.innerHTML = '<div class="input-group" id="sandbox-container"><input type="text" placeholder="Date" class="form-control" name="date" id= "datefield" ><\/div><script>$("#sandbox-container input").datepicker({language: "hu"});<\/script>';
  document.getElementById('wrapper').appendChild(newspan);

  $("#sandbox-container input").datepicker();

}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<div id="wrapper">
  <span>
    <div class="input-group" id="sandbox-container"><input type="text" placeholder="Date" class="form-control" name="date" id= "datefield" ></div>
    <script>$('#sandbox-container input').datepicker();</script>

  </span>
</div>

<br>
<br>
<input type="button" id="more_fields" onclick="add_fields();" value="New" class="btn btn-default" />

＆＃13;

Answer 2

Bootstrap不包含日期选择器。你必须使用jQuery UI。

见这里： http://jqueryui.com/datepicker/

如何添加动态Bootstrap日期选择器字段？

2 个答案: