How to get Bootstrap 3 Datepicker display in this picture? - css

Question

I've got display problem when using http://eternicode.github.io/bootstrap-datepicker in Bootstrap 3.
How to get datepicker in this picture?
I'm using MVC 5 with auto generated views
Create.cshtml
<div class="form-group">
#Html.LabelFor(model => model.TerminateDate, new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group date" id="dp3">
#Html.EditorFor(model => model.TerminateDate, new { htmlAttributes = new { #class = "form-control datepicker", #readonly = "readonly" } })
<span class="btn btn-default input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
#Html.ValidationMessageFor(model => model.TerminateDate)
</div>
</div>
</div>
UPDATE:
Now it looks like better but a little long, how to set the length?
<div class="form-group">
#Html.LabelFor(model => model.TerminateDate, new { #class = "control-label col-md-2" })
<div class="col-md-4">
<div class="input-group date">
#Html.EditorFor(model => model.TerminateDate, new { htmlAttributes = new { #class = "form-control date", #readonly = "readonly" } })
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
#Html.ValidationMessageFor(model => model.TerminateDate)
</div>
</div>
</div>

Answer 1

Hope this helps. I just added some class and change some tag. It will look like this
<div class="form-group">
#Html.LabelFor(model => model.TerminateDate, new { #class = "control-label col-md-2" })
<div class="input-group col-md-10">
<input type="text" class="form-control input-group date" id="dp3">
#Html.EditorFor(model => model.TerminateDate, new { htmlAttributes = new { #class = "form-control datepicker", #readonly = "readonly" } })
<span class="btn btn-default input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
#Html.ValidationMessageFor(model => model.TerminateDate)
</div>
</div>
Update:Take a look at the "Column sizing" subsection here

Answer 2

Try to follow this format:
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>

Answer 3

The default site.css created when you make a new project has a max-width set on the input element:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Remove or comment this out and your col-md-10 will work perfect.