We resolved this issue by modifying code in the org.alfresco.web.ui.common.renderer.DatePickerRenderer class. This is the class that renders the date/datetime picker widget in case of the effective date aspect in addition to other areas of the application.
We created a new javascript file, which retrieves the values for the date, month, and year from the form and applies the relevant date validations on these values. In our case the validations included the following.
1) February should not have more than 28 days (29 days in a leap year).
2) April, June, September, and November should not have more than 30 days.
3) February should have 29 days only in a leap year.
We added the following line in the encodeBegin method to include this newly created javascript file. This line was added right after the disabled check section in the method.
out.write("<script type=\"text/javascript\" src=\"/alfresco/scripts/dateValidation.js\"></script>");
Next, we added the following for each of the drop down selects (i.e. day/month/year) in the renderMenu method in the class.
out.write(" onChange=\"validateDate('" + clientId + "');\" ");
This line would ensure that the date is checked every time any of the values are changed in the date picker widget.
Hope this helps!