Extend datepicker to start with dropdown using bootstrap - html

Question

I have a requirement to display Datepicker with Dropdown as a single control, I have tried many samples available on the internet but they do not work for me.
My base code is given below with style in which I have to merge 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 kind of help would be appreciated.
Thanks in advance!
Edit
Opps! I missed mentioning that both controls should be side by side as displayed in below image.
Edit2
http://www.bootply.com/Tftcr9VVrH

Answer 1

I wrapped the elements in a div with class="form-inline" and put each group of elements into a div with class="form-group". I forked your 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>