Extend the date to start with a dropdown using bootstrap

I have a requirement to display Datepicker with Dropdown as a single control, I tried many samples available on the Internet, but they do not work for me.

My basic code is below with a style in which I have to combine them.

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

Any help would be appreciated.

Thanks in advance!

Edit

Opps! I missed the mention that both controls should be side by side, as shown in the image below.

enter image description here

Edit2

http://www.bootply.com/Tftcr9VVrH

+4
source share
1 answer

div class= "form-inline" div class= "form-group". bootply

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

0

All Articles