FAQs

Sometimes the datepicker pops up correctly but looks ‘wrong’ - usually because some of the text is too big, or misplaced. This happens when the template CSS over-riides the date-picker CSS. You can solve this by adding custom CSS to your form to correct the problems.

Here is an example from the forums of what can go wrong:

The first step is to check the CSS on the page using your browser Web Developer tools (click F12 in most browsers) to check what CSS is being applied to the ‘broken’ elements of the form. The datepicker HTML will be right at the bottom of the page HTML, not inside the form HTML.

Problems seem to happen most often with the ‘header’ and ‘title’ elements.

You can over-ride the template CSS by adding CSS to your form with a more specific selector. Here's an example:

div.datepicker_dashboard .title {
  font-size: 100%;
  padding: 0px;
} 

Using the div.datepicker_dashboard selector makes this style apply only to elements inside the datepicker; and the .title selector applies this particular CSS to the datepicker element with class='title'. Other similar snippets might be needed to correct problems in different parts of the calendar.