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.

Edit2
http://www.bootply.com/Tftcr9VVrH
Ankit source
share