jsf-2 - 使用 Primefaces 日历清除日期选择

Question

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

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

Answer 1

我想到的第一个方法是：

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

Answer 2

这对我有用

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

Answer 3

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

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

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

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

希望它可以帮助某人。

Answer 4

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

Answer 5

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){}
}