Как добавить динамическое поле выбора даты загрузки?

Question

Я хочу добавить подборку бутстрапов, как показано ниже. Я попытался, но тот же класс проблемы. Как я могу это сделать ??

http://jsfiddle.net/SJ7bJ/98/

<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

Bootstrap не включают выбора даты. Для этого вам нужно использовать пользовательский интерфейс jQuery.

Смотрите здесь: http://jqueryui.com/datepicker/

Answer 2

При добавлении нового DatePicker важно вызвать $ ("# id_of_datepickercontainer") DatePicker();. для инициализации недавно добавленного параметра datepicker. Вот пример:

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(); 
 

 
}

<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" />