JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.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/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div style="float: left ; margin: 10px" >Дата</div>
<div class="form-group" style="width:100%;float:left" >
<div class='input-group date'>
<input type='text' id="oneDate" name = "oneDate[]" value="" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="informationPlusOneDate">
<div>
<span style="float: right" class="btn btn-success plusOneDate pull-right">+</span>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
/* общий стиль */
input[type="checkbox"]{zoom:1.5; }
.hr{border-bottom: 1px solid #000}
.block{ width: 450px; padding: 10px; border: 1px solid #000;float: right; }
.information_json * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* стиль динамических полей*/
.pull-right {float: left;}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.titleLebel{
line-height: 30px;
padding-left: 20px;
}
/*!
*...
JavaScript
$(function () {
$('#oneDate').datetimepicker({
format:'YYYY-MM-DD HH:mm',
locale: 'ru'
});
});
$('body').on('click',"#oneDate", function(){
$(this).datetimepicker({
format:'YYYY-MM-DD HH:mm',
locale: 'ru'
}
);
});
// формируем новые поля
jQuery('.plusOneDate').click(function(){
jQuery('.informationPlusOneDate').before(
'<div class="form-group" style="width: 175px;float:left" >'+
'<div class="input-group date" >'+
'<input type="text" name = "oneDate[]" id="oneDate" class="form-control" />'+
'<span class="input-group-addon">'+
'<span class="glyphicon glyphicon-calendar"></span></span>'+
'</div><span class="btn btn-danger minusOneDate pull-right" style="float: right; margin-top: 5px;">–</span></div>'
);
});
// on - так как элемент динамически создан и обычный обработчик с ним не работает
jQuery(document).on('click', '.minusOneDate', function(){
jQuery( this ).closest( 'div' ).remove(); // удаление строки с полями
});