You are here

Date Popup

Error message

  • There is a security update available for your version of Drupal. To ensure the security of your server, you should update immediately! See the available updates page for more information.
  • There are security updates available for one or more of your modules or themes. To ensure the security of your server, you should update immediately! See the available updates page for more information.

The Date Popup module allows for manual time entry or use of a jQuery timepicker plugin. The Date module comes with a default jQuery timepicker which is already installed. The module also supports a dropdown timepicker that must be downloaded separately. The dropdown timepicker will not appear as an option until the code is available in the libraries folder. If you do not want to use a jQuery timepicker, you can choose the "Manual time entry" option below and users will get a regular textfield instead.

To install the dropdown timepicker, create a sites/all/libraries/wvega-timepicker directory in your site installation. Then visit https://github.com/wvega/timepicker/archives/master, download the latest copy and unzip it. You will see files with names like jquery.timepicker-1.1.2.js and jquery.timepicker-1.1.2.css. Rename them to jquery.timepicker.js and jquery.timepicker.css and copy them into sites/all/libraries/wvega-timepicker.

The Date Popup calendar includes some css for IE6 that breaks css validation. Since IE 6 is now superceded by IE 7, 8, and 9, the special css for IE 6 has been removed from the regular css used by the Date Popup. If you find you need that css after all, you can add it back in your theme. Look at the way the Garland theme adds special IE-only css in in its page.tpl.php file. The css you need is:

/* ___________ IE6 IFRAME FIX ________ */
.ui-datepicker-cover {
  display: none; /*sorry for IE5*/
  display/**/: block; /*sorry for IE5*/
  position: absolute; /*must have*/
  z-index: -1; /*must have*/
  filter: mask(); /*must have*/
  top: -4px; /*must have*/
  left: -4px; /*must have*/ /* LTR */
  width: 200px; /*must have*/
  height: 200px; /*must have*/
}