Question

我需要将带有Dropdown的Datepicker显示为单个控件，我已尝试在互联网上提供许多样本，但它们对我不起作用。

我的基本代码在下面给出了我必须合并它们的样式。

<fieldset>
    <div class="form-group">
        <label class="col-sm-2 control-label">Date</label>
        <div class="col-sm-4">
            <select name="Year" class="form-control" ng-model="Year" required>
                <option>2016</option>
                <option>2015</option>
                <option>2014</option>
            </select>
            <div ng-messages="form.formValidate.select.$error" ng-if="form.formValidate.$submitted" class="text-danger"><span ng-message="required">This field is required</span></div>
            <div class="ui-datepicker shadow-clear">
                <p class="input-group">
                    <input type="text" name="date" required="" class="form-control" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default"><em class="ion-calendar"></em></button>
                    </span>
                </p>
                <div ng-messages="form.formValidate.date.$error" ng-if="form.formValidate.$submitted" class="text-danger"><span ng-message="required">This field is required</span></div>
            </div>
        </div>
    </div>
</fieldset>

任何形式的帮助都将受到赞赏。

提前致谢！

修改

哎呀！我没想到两个控件应该并排显示在下图中。

EDIT2

http://www.bootply.com/Tftcr9VVrH

Answer 1

我用div =“form-inline”将元素包装在div中，并将每组元素放入一个带有class =“form-group”的div中。我分叉你的bootply here

<fieldset>
  <div class="form-inline">
    <div class="form-group">
      <label for="Year">Date</label>
      <select name="Year" class="form-control" required="" ng-model="Year">
        <option>2016</option>
        <option>2015</option>
        <option>2014</option>
      </select>
      <div class="text-danger" ng-if="form.formValidate.$submitted" ng-messages="form.formValidate.select.$error"><span ng-message="required">This field is required</span></div>
    </div>
    <div class="form-group">
      <div class="ui-datepicker shadow-clear">
        <div class="input-group">
          <input name="date" class="form-control" required="" type="text">
          <span class="input-group-btn">
             <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-calendar"></em></button>
           </span>
        </div>
        <div class="text-danger" ng-if="form.formValidate.$submitted" ng-messages="form.formValidate.date.$error"><span ng-message="required">This field is required</span></div>
     </div>
</div>

使用bootstrap将datepicker扩展为下拉列表

1 个答案: