如何获取Bootstrap 3 Datepicker在这张图片显示？ [英] How to get Bootstrap 3 Datepicker display in this picture?

问题描述

使用

 < 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 =textclass =form-control input-group dateid =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> 
  

更新：查看列大小子部分此处

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>

解决方案

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

这篇关于如何获取Bootstrap 3 Datepicker在这张图片显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！