jquery - 如何增加此日期范围选择器文本框的宽度？

Question

Click here to view Image of mobile view您好，我想增加日期范围选择器文本框的宽度。 Click here to view the image

编码如下:

<div class="row">
    <div class="col-xs-12 col-md-6">
        <label> Date Range</label><br />
        <input type="text" name="daterange" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
    </div>
    <div class="col-xs-12 col-md-6">
        <label>Id </label>
        @Html.TextBoxFor(model => model.NRIC, new { @class = "form-control", id = "NRIC" })
    </div>
</div>

我希望日期范围文本框宽度与文本框宽度相同。如何增加？？

Answer 1

只需设置输入的样式属性

<input type="text" name="daterange" style="width: 300px" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
<!-------------- the width you need --------------^^^^^---->

或者添加一个新的 CSS 规则

input[name=daterange]{
    width: 300px;
}

你必须根据需要调整宽度...:D

---

更新:使用具有 min-width 和 max-width css 规则的容器

<div style="max-width: 100%; min-width: 50%">
    <input type="text" name="daterange" style="width: 100%" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
</div>