Clear Date Selection using Primefaces Calendar - jsf-2

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>