使用 Primefaces 日历清除日期选择答案

【问题标题】：Clear Date Selection using Primefaces Calendar使用 Primefaces 日历清除日期选择
【发布时间】：2012-09-01 17:26:08
【问题描述】：

有什么方法可以清除使用素面日历的日期选择吗？

<p:calendar pattern="MM/dd/yyyy" navigator="true" id="endDate" for="endDate"
readonlyInput="true" mindate="#{manageMarketingProgramsBean.currentDate}" showOn="button">
<f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/New_York" />
</p:calendar>

我有 readonlyInput="true" 因为我不希望用户输入日期。我强迫他们从日历中选择日期，需要有另一种方式让用户能够清除所选日期。请让我知道如何实现这一目标？

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

我想到的第一个方法是：

<p:calendar readonlyInput="true" widgetVar="calendarWidget"/>     
<p:commandButton value="Reset" onclick="calendarWidget.setDate(null)"/>

【讨论】：

这个按钮会显示在日历旁边吗？有没有办法将按钮或链接添加到日历本身？
是的，它只是一个附加按钮，通过使用日历的javascript客户端api将日历值的值设置为null。您也可以使用纯 html：<input type="button" value="Reset" onclick="calendarWidget.setDate(null);"/>.
既然 PrimeFaces p:calendar 是 jQuery Datepicker 的一个实现，那么请看下面：stackoverflow.com/questions/4917779/…
不幸的是，上面的解决方案似乎不适用于 AJAXed p:calendars，也就是说，如果日历有 p:ajax 标签，则执行重置按钮时不会发出 AJAX 请求。在此处查看后续问题：stackoverflow.com/q/14235357/396732

【解决方案2】：

这对我有用

<p:calendar widgetVar="calendarWidget" pattern="MM/dd/yyyy" />     
<p:commandButton value="Reset" onclick="PF('calendarWidget').setDate(null)" 
type="button" />

【讨论】：

【解决方案3】：

日历组件的 Primefaces 具有以下属性：showButtonBar。

如果您像这样将其设置为 true：

          <p-calendar
            appendTo="body"
            formControlName="someControl"
            id="someID"
            [maxDate]="someMaxDate"
            [showButtonBar]="true"
            [showIcon]="true"
          ></p-calendar>

然后它会在日历组件上显示两个按钮。今天和清除。

希望它对某人有所帮助。

【讨论】：

【解决方案4】：

HTML

<p:calendar 
    yearRange="c-100:c+100" 
    readonlyInput="true" 
    pattern="dd/MM/yyyy" 
    id="identity" 
    navigator="true" 
    mindate="today" 
    widgetVar="dateWidget" 
    value="#{bean.fieldname}" 
/>

JS

function name() {
    var mainID = prefix + collpaseID;
    -
      -
        -
          -
    clearCalendar(mainID,event);
}



function clearCalendar(collapseId) {
    try {
            allElements = 
 document.getElementById(collapseId).getElementsByClassName('hasDatepicker');

        for (i = 0, n = allElements.length; i < n; ++i) {
            allElements[i].setAttribute('onkeyup', 
'clearDate("'+allElements[i].id+'", event)');
        }
    }
    catch(e) {}
}



function clearDate(fieldID, e) {
    try{
        // 8 - backspace key, 46 - delete key
        if(e.keyCode == 8 || e.keyCode == 46) {
            //PF(getWidgetVarById(collapseId)).setDate(null);
            document.getElementById(fieldID).value="";
        }
    }
    catch(e){}
}

【讨论】：

【解决方案5】：

<p:calendar
    widgetVar="calendarWidgetStart"
/>

<p:calendar
    widgetVar="calendarWidgetEnd"
/>

<p:commandLink
    value="Action"
    action="#{entity.action}"
    onclick="setTimeout('remoteCommand();', 100);"
/>

<p:remoteCommand
    name="remoteCommand"
    update="@form"
    onstart="clearCalendarWidget();"
/>

<script>
    function clearCalendarWidget() { 
        $( PF('calendarWidgetEnd').setDate(null) ); 
        $( PF('calendarWidgetStart').setDate(null) );
    } 
</script>

【讨论】：