How resize filed input datetime in bootstrap-datetimepicker? - html

Question

I decided to change dashboard selected period rage datetime.
I chose bootstrap-datetimepicker.
$(function () {
$("#datetime_input").datetimepicker({
locale: 'ru'
});
$("#datetime_output").datetimepicker({
locale: 'ru'
});
});
<div class="row">
<span>C</span>
<div class='col-xs-3'>
<div class="form-group">
<div class='input-group date' id='datetime_input'>
<input id="INPUT_DATETIME" type='text' class="form-control" value="${INPUT_DATETIME}"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<span>По</span>
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='datetime_output'>
<input id="OUTPUT_DATETIME" type='text' class="form-control" value="${OUTPUT_DATETIME}"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
How resize field input datetime in bootstrap-datetimepicker?
For example how reduce field input datetime?
How to eliminate the resulting difference?
p.s.
I found some question
How to resize the Bootstrap DatePicker?
Reduce size and change text color of the bootstrap-datepicker field
BUT proposed solution not work for my case.

Answer 1

Your question is not clear. May be you want to implement date range picker in your dashboard with bootstrap datetime picker.So, if it is like that then the below link is useful to you.
Link : http://www.daterangepicker.com/
Use the below code :
<div class="row">
<span>C</span>
<div class='col-xs-3'>
<div class="form-group">
<div class='input-group date' id='datetime_input'>
<input id="INPUT_DATETIME" type='text' class="form-control" value="${INPUT_DATETIME}"/>
<span id="input_pick" class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<span>По</span>
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='datetime_output'>
<input id="OUTPUT_DATETIME" type='text' class="form-control" value="${OUTPUT_DATETIME}"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
Add CSS code :
#INPUT_DATETIME{
width : 177px;
}
#input_pick{
width: 37px;
height: 34px;
float: left;
}