Tuesday, August 18, 2015

How to customize date display in PrimeFaces Calendar component

There is a scenario where the requirement wants the calendar component to enable certain date only.
eg, enable 1st day of the month only.

To achieve this requirement, attribute beforeShowDay need to be used.
Description for beforeShowDay in PrimeFaces tag document.
Callback to execute before displaying a date, used to customize date display.

Steps:
1. Write the callback function to be called by the Calendar component.
function beforeShowDayCallback(date){
  if (date.getDate() == 1) {
    return [true, ''];
  }
  return [false, ''];
}

2. Call the function in calendar component.
<p:calendar id="gstEffDateId"  beforeShowDay="beforeShowDayCallback"  />


Done!!

LinkWithin

Related Posts Plugin for WordPress, Blogger...