Managing a Date of Birth Field in an ExpressionEngine Form

Dates in ExpressionEngine aren't exactly straightforward as you will know if you have ever worked with them. Regularly I get asked to build either a SafeCracker or Zoo Visitor form that will include a Date of Birth field. This is how I deal with that particular field.

If I use the native Date field that comes with ExpressionEngine I get DatePicker functionality in my form where a user can choose their date of birth. This however is not ideal.

Native EE Datepicker

  • - The default date format for this field is YYYY-MM-DD hh:mm PM.
  • - I don’t want a user to have to select a time for their birth.
  • - Also as I live in Europe so I wish the date format to be DD-MM-YYYY
  • - How frustrating is it clicking backwards through the month and years to reach your birth year?

So what’s the solution? Well there are 2 solutions luckily. Both solutions involve creating a dummy field that our user will see and then passing anything from that field into our hidden correct date of birth field for our entry. Both solutions also require JavaScript to do the work for us.

DatePicker Date of Birth Field Solution

The first solution is to still use a datepicker but configure it to work the way we want it to.

Newly configured Datepicker

The benefits of using our own dummy date picker field are thus:

  • - I can format my date DD-MM-YYYY
  • - No time requirement
  • - I can set the DatePicker to show month and year select menus
  • - I can give my DatePicker a year range

Select Menu Date of Birth Field Solution

The second solution is to use a separate select menu for day, month and year.

Select MenuDatepicker

The benefits of this solution are as follows.

  • - I can format my date DD-MM-YYYY
  • - No time requirement
  • - I now have a very easy to use day, month and year menu
  • - No fiddly pop-up datepicker
  • - I can give my DatePicker a year range

Rather than swamp this page with code I have provided both solutions as ExpressionEngine templates for download. These solutions use SafeCracker so make sure you have the add-on installed. The name for my native EE field is date_of_birth

Download and Instructions

  • - Download templates here or alternatively at Github here.
  • - Make sure you are Saving Templates as Files in ExpressionEngine.
  • - Unzip the ee-date-of-birth-templates.zip and put both dob.group and inc_dob.group folder inside your system/expressionengine/templates/default_site/ folder
  • - Once folders are there visit your Template manager and the new template folders and templates will be created.
  • - Make sure the template files themselves have write permissions if you wish to edit them

ExpressionEngine DatepickerTemplate Screenshot Screenshot of DatePicker Date of Birth Field Solution

ExpressionEngine Date DropdownTemplate Screenshot Screenshot of Select Menu Date of Birth Field Solution