css - 如何在 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;
}

希望这对您有所帮助!