如何在p：calendar旁邊放置清除按鈕？

Question

我有一個包含多個元素的表單，我在此表單中有一個primefaces日曆，我想在日曆輸入旁邊添加一個按鈕，以允許用戶將日期設置爲null並清除輸入字段。

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

下面的圖片是這個源代碼的結果：Form with input fields and the button

我試圖把這種形式組的不同地方，按鈕沒有成功 希望有人知道如何做到這一點

Answer 1

我有這樣的結構，下面的HTML和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; 
} 

希望這將幫助你！