Willy Willy - 4 months ago 26
CSS Question

How to get Bootstrap 3 Datepicker display in this picture?

I've got display problem when using http://eternicode.github.io/bootstrap-datepicker in Bootstrap 3.
enter image description here
How to get datepicker in this picture?
enter image description here

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?
enter image description here

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

nej nej
Answer

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

Comments