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?

score 6 · Answer 1 · answered Sep 07 '12 at 21:28

6

The first approach that comes into my mind would be:

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

answered Sep 07 '12 at 21:28

fischermatte

3,327
4
42
52

Will this button be displayed next to the calendar? Is there way to add to the calendar itself either button or link? – Sri Sep 07 '12 at 21:36
Yes, it is just an additional button that sets the value of the calendar value to null by using calendar's javascript client api. You could also use plain html: ``. – fischermatte Sep 07 '12 at 21:44
Since PrimeFaces p:calendar is an implementation of jQuery Datepicker, then see the following: http://stackoverflow.com/questions/4917779/jquery-datepicker-date-reset – Howard Jan 09 '13 at 03:38
Unfortunately, the above solution doesn't seem to work with AJAXed p:calendars, that is, if the calendar has a p:ajax tag, no AJAX request is issued when the reset button is executed. See followup question here: http://stackoverflow.com/q/14235357/396732 – Kawu Jan 09 '13 at 12:41

score 4 · Answer 2 · answered Dec 05 '17 at 13:25

4

This worked for me

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

answered Dec 05 '17 at 13:25

bahadir_g

215
2
16

score 2 · Answer 3 · answered Jan 31 '20 at 21:34

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.

tested and this works nicely for primeNG version 13.0.4 – Krishneel Singh May 10 '22 at 09:39 — Krishneel Singh, May 10 '22 at 09:39

score 0 · Answer 4 · answered Dec 27 '18 at 11:15

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

Krys · Answer 5 · 2021-07-15T16:41:47.760

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

Clear Date Selection using Primefaces Calendar

5 Answers5

Linked