How to put clear button beside p:calendar? - css

Question

I have a form which contains multiple elements, i have a primefaces calendar inside this form and i want to add a button beside the calendar input to allow user to set the date to null and clear the input field.
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="date-depart">Date Départ
</label>
<div class="row calendar-exibit col-md-3 col-sm-6 col-xs-12">
<fieldset style="margin-bottom: -10px">
<div class="control-group">
<div class="controls">
<div class="col-md-11 xdisplay_inputx form-group has-feedback" style="width: 85.667%; padding-left: 0px; border-radius: 3px;">
<p:calendar class="col-md-6 col-sm-6 col-xs-12" locale="fr" id="ddepart" readonlyInput="true" pattern="dd/MM/yyyy" mask="true" value="#{travailleMB.datedepart}" placeholder="--- Date Depart ---" style="border-radius: 3px; font-size: 12px; padding-right: 9px; padding-top: 3px;">
<p:ajax event="dateSelect" listener="#{travailleMB.saveSelect}" process="#this"/>
</p:calendar>
</div>
</div>
<div>
<h:button value="X" style="border-radius: 3px; font-size: 12px; margin-left:300px;"></h:button>
</div>
</div>
</fieldset>
</div>
</div>
the following image is the result of this source code : Form with input fields and the button
I tried to put the button in different places of this form-group without success
Hope someone knows how to do it

Answer 1

I have this structure with the help of following HTML and CSS:
HTML:
<div class="input-group">
<p:calendar styleClass="form-control radius-none" value="#{xBean.dateValue}" />
<span class="input-group-addon radius-none">
<p:commandLink actionListener="#{xBean.clearDateValue}">
<i class="fa fa-times"></i>
</p:commandLink>
</span>
</div>
CSS:
.input-group {
width: 100%;
display: table;
position: relative;
border-collapse: separate;
}
.input-group .form-control,
.input-group-addon,
.input-group-addon-with-link,
.input-group-btn {
display: table-cell !important;
}
.form-control {
display: block!important;
padding: 6px 12px!important;
font-size: 14px!important;
line-height: 1.42857143!important;
color: #555!important;
background-color: #fff!important;
background-image: none!important;
border: 1px solid #ccc!important;
border-radius: 4px;
margin-bottom: 0!important;
}
.radius-none {
border-radius: 0!important;
}
.input-group-addon:last-child,
.input-group-addon-with-link:last-child {
border-left: 0;
}
.input-group-addon,
.input-group-addon-with-link a,
.input-group-addon-with-link span {
padding: 13px 15px;
}
.input-group-addon,
.input-group-addon-with-link {
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
}
.input-group-addon,
.input-group-addon-with-link,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
Hope this will help you out!