Change DOB Fields to Select Boxes in Magento

If you wants to change DOB fields to select boxes in magento this tutorial will help you. By default magento has input type boxes for enter DOB on registration form. So you can change these input boxes into dropdown boxes using below code.

You can copy below code and replace in app\design\frontend\base\default\template\customer\widget\dob.phtml and add some CSS based on your theme.

<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">
	<!-- days -->
	<select id="sDay" name="sDay" rel="<?php echo str_replace(":","\:",$this->getFieldId('day')) ?>" class="dateselect <?php if ($this->isRequired()): echo 'validate-select'; endif; ?>" style="width:60px;">
<option value="" >Date</option>
		<?php
			for ($i = 1; $i <= 31; $i++) { $day = str_pad($i, 2, "0", STR_PAD_LEFT); $selected = ($this->getDay() == $day) ? "selected='selected'" : "";
				echo '<option value="'.$day.'" '.$selected.'>'.$i.'</option>';
			}
		?>
    </select>
    
	<!-- months -->
    <?php $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',
    );
	?>
    <select id="sMonth" name="sMonth" rel="<?php echo str_replace(":","\:",$this->getFieldId('month')) ?>" class="dateselect <?php if ($this->isRequired()): echo 'validate-select'; endif; ?>" style="width:100px;">
<option value="" >Month</option>
		<?php foreach ($months as $key=>$var){
			$selected = ($this->getMonth() == $key) ? "selected='selected'" : "";
			echo '<option value="'.$key.'" '.$selected.'>'.$var.'</option>';
		}
		?>
    </select>
    
	<!-- years -->
	<select id="sYear" name="sYear" rel="<?php echo str_replace(":","\:",$this->getFieldId('year')) ?>" class="dateselect <?php if ($this->isRequired()): echo 'validate-select'; endif; ?>" style="width:80px;">
<option value="">Year</option>
		<?php $year_end = date('Y'); $year_start = $year_end-60; for ($i = $year_end; $i >= $year_start; $i--) {
			$selected = ($this->getYear() == $i) ? "selected='selected'" : "";
			echo '<option value="'.$i.'" '.$selected.'>'.$i.'</option>';
		}
		?>
    </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
	jQuery( ".dateselect" ).each(function() {
	  var field_id = jQuery(this).attr('rel');
	  var value = jQuery( "#"+field_id ).val();
	  jQuery(this).val(value);
	});
	
	jQuery( "#<?php echo $this->getFieldId('dob');?>" ).val(jQuery("#<?php echo $this->getFieldId('day');?>").val()+'/'+jQuery("#<?php echo $this->getFieldId('month');?>").val()+'/'+jQuery("#<?php echo $this->getFieldId('year');?>").val());
	
	// on change
	jQuery( ".dateselect" ).change(function() {
		var value = jQuery(this).val();
		var field_id = jQuery(this).attr('rel');
		jQuery( "#"+field_id ).val(value);
		
		jQuery( "#<?php echo $this->getFieldId('dob');?>" ).val(jQuery("#<?php echo $this->getFieldId('day');?>").val()+'/'+jQuery("#<?php echo $this->getFieldId('month');?>").val()+'/'+jQuery("#<?php echo $this->getFieldId('year');?>").val());
	});
});

//]]>
</script>

You need to include jQuery also on this page to work of this code. After adding the code DOB fields will look like as below image.

Hope this tutorial will help you to change DOB fields to select boxes in Magento registration form.