How to add select dropdown in magento registration page for Date of birth field

Hello Friends,

Today i want to know you that how you can add to convert textbox to select dropdown for date of birth field on registration page.

you can not add the dropdown in magento registration form for date of birth because its working on textbox and it update those value in

<input type="hidden" id="dob" name="dob">

without it we can not store the DOB in magento db.

Here is the simple way to integrate dropdown in DOB.



Steps :

1. Please open the dob.phtml file from your theme like
          app\design\frontend\<THEME NAME>\default\template\customer\widget\dob.phtml

2. Please copy this code and set it into above file.

<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">
<style>.dob-day,.dob-month,.dob-year{ display:none;}</style>
<?php
    $days = "<option value=''>DD</option>";
     $dclass = '';
    for($di = 1; $di <= 31; $di++){
         $dclass = '';
        if($this->getDay() == $di) { $dclass = 'selected';}
        $days .= "<option value='".$di."' ". $dclass.">".$di."</option>";
    }
   
    $months = "<option value=''>MM</option>";
    for($mi = 1; $mi <= 12; $mi++){
         $mclass = '';
        if($this->getMonth() == $mi) { $mclass = 'selected';}
        $months .= "<option value='".$mi."' ". $mclass.">".$mi."</option>";
    }
   
    $years = "<option value=''>YY</option>";
    for($yi = (int) date('Y'); $yi >= 1950; $yi--){
     $yclass = '';
        if($this->getYear() == $yi) { $yclass = 'selected';}
        $years .= "<option value='".$yi."' ". $yclass." >".$yi."</option>";
    }
    $this->setDateInput('d',
        '<div class="dob-day" >
          <input type="hidden" id="' . $this->getFieldId('day') . '" name="' . $this->getFieldName('day') . '" value="' . $this->getDay() . '" title="' . $this->__('Day') . '" class="input-text validate-custom" ' . $this->getFieldParams() . '  />
             <label for="' . $this->getFieldId('day') . '">' . $this->__('DD') . '</label>
         </div>'
    );
    echo '<div  class="dob-nday"><select id="nday" name="nday" title="' . $this->__('Day') . '" class="input-text" ' . $this->getFieldParams() . '>
             '.$days.'
             </select>
             </div>';
          
    $this->setDateInput('m',
        '<div class="dob-month" >
        <input type="hidden" id="' . $this->getFieldId('month') . '" name="' . $this->getFieldName('month') . '" value="' . $this->getMonth()  . '" title="' . $this->__('Month')  . '" class="input-text validate-custom" ' . $this->getFieldParams()  . ' />
             <label for="' . $this->getFieldId('month') . '">' . $this->__('MM')  . '</label>
         </div>'
    );

    echo '<div class="dob-nmonth"><select id="nmonth" name="nmonth" title="' . $this->__('month') . '" class="input-text" ' . $this->getFieldParams() . '>
             '.$months.'
             </select>
             </div>';
           
           
    $this->setDateInput('y',
        '<div class="dob-year" >
        <input type="hidden" id="' . $this->getFieldId('year') . '" name="' . $this->getFieldName('year') . '" value="' . $this->getYear()  . '" title="' . $this->__('Year')  . '" class="input-text validate-custom" ' . $this->getFieldParams()  . '  />     
             <label for="' . $this->getFieldId('year') . '">' . $this->__('YYYY')  . '</label>
         </div>'
    );
    echo      '<div class="dob-nyear">
                <select id="nyear" name="nyear" title="' . $this->__('year') . '" class="input-text" ' . $this->getFieldParams() . '>
             '.$years.'
             </select>
             </div>';
?>
    <?php echo $this->getSortedDateInputs() ?>
    <div class="dob-full" style="display:none;">
        <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[
document.observe("dom:loaded", function() {
    Event.observe("nday",'change', function(select){
        $("day").value = $(this).value;
    });
    Event.observe("nmonth",'change', function(select){
    $("month").value = $(this).value;
    });
    Event.observe("nyear",'change', function(select){
        $("year").value = $(this).value;
    });
});
    var customer_dob = new Varien.DOB('.customer-dob', <?php echo $this->isRequired() ? 'true' : 'false' ?>, '<?php echo $this->getDateFormat() ?>');
//]]>
</script>

3. save it and clear the catch from magento backend and test it

just click on this link and You can get full code of this file
http://aimsinfosoft.com/blogger/download.php?filename=dob.phtml

Thanks
Enjoy Your Self