Change Date of Birth Field to Select Boxes in Magento

This is a very simple implementation for select boxes for date of birth field (DOB) on Magento registration page using jQuery

Note: This only supports Australian date format (DD/MM/YYYY)

TODO: Make it support native magento date formats

How to set it up:

1. Go to SYSTEM > CONFIGURATION > CATALOG > DATE & TIME SETTINGS and change date format to Day/Month/Year

2. Make a copy of “frontend/package/theme/template/customer/widget/dob.phtml” and replace it with this code:

<label for="<?php echo $this->getFieldId('month')?>"<?php if ($this->isRequired()) echo ' class="required"' ?>><?php if ($this->isRequired()) echo '<em>*</em>' ?><?php echo $this->__('Date of Birth') ?></label>
<div class="input-box customer-dob">
	<?php
    // days
    echo "<select id=\"sDay\" name=\"sDay\" rel=\"".str_replace(":","\:",$this->getFieldId('day'))."\" class=\"dateselect\">";
	$selected = (!$this->getDay()) ? "selected=\"selected\"" : "";
	echo "<option value=\"\" ".$selected.">Day</option>";
    for ($i = 1; $i <= 31; $i++) {
        $ti = str_pad($i, 2, "0", STR_PAD_LEFT);
		$selected = ($this->getDay() == $ti) ? "selected=\"selected\"" : "";
        echo "<option value=\"".$ti."\" ".$selected.">".$i."</option>";
    }
    echo "</select>";
    ?>
    
    <?php
    // months
    $months = array(
        '01'=>'January',
        '02'=>'February',
        '03'=>'March',
        '04'=>'April',
        '05'=>'May',
        '06'=>'June',
        '07'=>'July',
        '08'=>'August',
        '09'=>'September',
        '10'=>'October',
        '11'=>'November',
        '12'=>'December',
    );
    echo "<select id=\"sMonth\" name=\"sMonth\" rel=\"".str_replace(":","\:",$this->getFieldId('month'))."\" class=\"dateselect\">";
	$selected = (!$this->getMonth()) ? "selected=\"selected\"" : "";
	echo "<option value=\"\" ".$selected.">Month</option>";
    foreach ($months as $key=>$var)
    {
        $selected = ($this->getMonth() == $key) ? "selected=\"selected\"" : "";
        echo "<option value=\"".$key."\" ".$selected.">".$var."</option>";
    }
    echo "</select>";
    ?>
    
    <?php
    // years
    $year_end = date('Y');
    $year_start = $year_end-99;
	echo "<select id=\"sYear\" name=\"sYear\" rel=\"".str_replace(":","\:",$this->getFieldId('year'))."\" class=\"dateselect\">";
	$selected = (!$this->getYear()) ? "selected=\"selected\"" : "";
	echo "<option value=\"\" ".$selected.">Year</option>";
    for ($i = $year_end; $i >= $year_start; $i--) {
        $selected = ($this->getYear() == $i) ? "selected=\"selected\"" : "";
        echo "<option value=\"".$i."\" ".$selected.">".$i."</option>";
    }
    echo "</select>";
	
    ?>
    <div class="dob-full" style="display:none;">
        <div class="dob-day"><input type="hidden" id="<?php echo $this->getFieldId('day')?>" name="<?php echo $this->getFieldName('day')?>" value="<?php echo $this->getDay()?>" /></div>
        <div class="dob-month"><input type="hidden" id="<?php echo $this->getFieldId('month')?>" name="<?php echo $this->getFieldName('month')?>" value="<?php echo $this->getMonth()?>" /></div>
        <div class="dob-year"><input type="hidden" id="<?php echo $this->getFieldId('year')?>" name="<?php echo $this->getFieldName('year')?>" value="<?php echo $this->getYear()?>" /></div>
        <input type="hidden" id="<?php echo $this->getFieldId('dob')?>" name="<?php echo $this->getFieldName('dob')?>" />
    </div>
    <div class="validation-advice" style="display:none;"></div>
</div>
<script type="text/javascript">
//<![CDATA[

var customer_dob = new Varien.DOB('.customer-dob', <?php echo $this->isRequired() ? 'true' : 'false' ?>, '<?php echo $this->getDateFormat() ?>');
jQuery(document).ready(function() {
	// on load set field values
	jQuery( ".dateselect" ).each(function() {
	  related_field_id = jQuery(this).attr('rel');
	  current_value = jQuery( "#"+related_field_id ).val();
	  jQuery(this).val(current_value);
	});
	  jQuery( "#<?php echo str_replace(":","\:",$this->getFieldId('dob'));?>" ).val(jQuery("#<?php echo str_replace(":","\:",$this->getFieldId('day'));?>").val()+'/'+jQuery("#<?php echo str_replace(":","\:",$this->getFieldId('month'));?>").val()+'/'+jQuery("#<?php echo str_replace(":","\:",$this->getFieldId('year'));?>").val());
	// on change set field values
	jQuery( ".dateselect" ).change(function() {
	  current_value = jQuery(this).val();
	  related_field_id = jQuery(this).attr('rel');
	  jQuery( "#"+related_field_id ).val(current_value);
	  jQuery( "#<?php echo str_replace(":","\:",$this->getFieldId('dob'));?>" ).val(jQuery("#<?php echo str_replace(":","\:",$this->getFieldId('day'));?>").val()+'/'+jQuery("#<?php echo str_replace(":","\:",$this->getFieldId('month'));?>").val()+'/'+jQuery("#<?php echo str_replace(":","\:",$this->getFieldId('year'));?>").val());
	});
});

//]]>
</script>

3. To display fields on a form use this syntax:

<?php echo $this->getLayout()->createBlock('customer/widget_dob')
   ->setDate($this->getCustomer()->getDob())
   ->toHtml() ?>

For example, in checkout/onepage/billing.phtml:

<?php echo $this->getLayout()->createBlock('customer/widget_dob')
   ->setDate($this->getCustomer()->getDob())
   ->setFieldIdFormat('billing:%s')
   ->setFieldNameFormat('billing[%s]')
   ->toHtml() ?>

To display the field result:

	<?php echo Mage::helper('core')->formatDate(Mage::getSingleton('customer/session')->getCustomer()->getDob(), 'long', false); ?>

5 Replies to “Change Date of Birth Field to Select Boxes in Magento”

  1. This tool helped me a lot in the supplementary aids. I have people who do not have much knowledge of computer, this information gives me a huge attraction. I will share with my friends. Thank you.

  2. Hi thanks for the code it makes the registration form quicker to do which is always a plus! Was just wondering if there would be an easy way to do an age check to make sure the person registering is 18 or over and to then throw up an error message if their not?

    1. Sorry for the delay…

      It’s a good question. But this might need some additional server side validation, outside the scope of this task. But, you could try something like this to validate age inside the date field “change” function:


      jQuery( ".dateselect" ).change(function() {
      ...
      var age = getAge(new Date(month+'/'+day+'/'+year);
      if (age < 18)
      {
      // do something here like disable the submit buttons and show and alert
      alert('you are too young!');
      }
      ...
      });

      function getAge(dateString) {
      var birthday = +new Date(dateString);
      return ~~((Date.now() - birthday) / (31557600000));
      }

  3. Thanks, I’m looking to validate months February to get it publish here, add support for translation:

    <label class="control-label isRequired()) echo ‘required’ ?>”
    for=”getFieldId(‘dob’)?>”>
    __(‘Date of Birth’) ?>

    <?php
    // days
    echo "getFieldId(‘day’)).””
    class=”dateselect span2″>”;
    $selected = (!$this->getDay()) ? “selected=”selected”” : “”;
    echo “–” . $this->__(‘Day’) . “–“;
    for ($i = 1; $i getDay() == $ti) ? “selected=”selected”” : “”;
    echo “”.$i.””;
    }
    echo “”;
    ?>
    $this->__(‘January’),
    ’02’=> $this->__(‘February’),
    ’03’=> $this->__(‘March’),
    ’04’=> $this->__(‘April’),
    ’05’=> $this->__(‘May’),
    ’06’=> $this->__(‘June’),
    ’07’=> $this->__(‘July’),
    ’08’=> $this->__(‘August’),
    ’09’=> $this->__(‘September’),
    ’10’=> $this->__(‘October’),
    ’11’=> $this->__(‘November’),
    ’12’=> $this->__(‘December’),
    );
    echo “getFieldId(‘month’)).””
    class=”dateselect span3″>”;
    $selected = (!$this->getMonth()) ? “selected=”selected”” : “”;
    echo “–” . $this->__(‘Month’) . “–“;
    foreach ($months as $key=>$var)
    {
    $selected = ($this->getMonth() == $key) ? “selected=”selected”” : “”;
    echo “”.$var.””;
    }
    echo “”;
    ?>
    <?php
    // years
    $year_end = date('Y');
    $year_start = $year_end-99;
    echo "getFieldId(‘year’)).””
    class=”dateselect span3″>”;
    $selected = (!$this->getYear()) ? “selected=”selected”” : “”;
    echo “–” . $this->__(‘Year’) . “–“;
    for ($i = $year_end; $i >= $year_start; $i–) {
    $selected = ($this->getYear() == $i) ? “selected=”selected”” : “”;
    echo “”.$i.””;
    }
    echo “”;
    ?>

    <input type="hidden" id="getFieldId(‘day’)?>” name=”getFieldName(‘day’)?>” value=”getDay()?>” />
    <input type="hidden" id="getFieldId(‘month’)?>” name=”getFieldName(‘month’)?>” value=”getMonth()?>” />
    <input type="hidden" id="getFieldId(‘year’)?>” name=”getFieldName(‘year’)?>” value=”getYear()?>” />
    <input type="hidden" id="getFieldId(‘dob’)?>” name=”getFieldName(‘dob’)?>” />

    //<![CDATA[
    var customer_dob = new Varien.DOB('.customer-dob', isRequired() ? ‘true’ : ‘false’ ?>, ‘getDateFormat() ?>’);
    jQuery(document).ready(function() {
    // on load set field values
    jQuery( “.dateselect” ).each(function() {
    related_field_id = jQuery(this).attr(‘rel’);
    current_value = jQuery( “#”+related_field_id ).val();
    jQuery(this).val(current_value);
    });
    jQuery( “#getFieldId(‘dob’));?>” ).val(jQuery(“#getFieldId(‘day’));?>”).val()+’/’+jQuery(“#getFieldId(‘month’));?>”).val()+’/’+jQuery(“#getFieldId(‘year’));?>”).val());
    // on change set field values
    jQuery( “.dateselect” ).change(function() {
    current_value = jQuery(this).val();
    related_field_id = jQuery(this).attr(‘rel’);
    jQuery( “#”+related_field_id ).val(current_value);
    jQuery( “#getFieldId(‘dob’));?>” ).val(jQuery(“#getFieldId(‘day’));?>”).val()+’/’+jQuery(“#getFieldId(‘month’));?>”).val()+’/’+jQuery(“#getFieldId(‘year’));?>”).val());
    });
    });
    //]]>

  4. Have you tried this with Magento 1.9? I tried your code but it doesn’t validate anymore, and the registration form won’t submit. Weird. Maybe I missed something or maybe I need to change something in your code. hmmmm..

Comments are closed.