Clear Date Selection using Primefaces Calendar

Question

Is there any way to clear the date selection using prime faces calendar?

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

I have readonlyInput="true" because I dont want user to type the date. I force them to pick the date from the calendar, there needs to be another way to provide user the ability to clear the date selected. Please let me know how can I achieve this?

Answer 1

The first approach that comes into my mind would be:

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

Answer 2

This worked for me

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

Answer 3

Primefaces for the calendar component have this property: showButtonBar.

If you set it to true like this:

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

Then it will display two buttons on the calendar component. Today and Clear.

Hope it helps somebody.

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

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