DOB select boxes on Magento registration form - magento

Question

I'm currently using Magento 1.5.0.1
When a customer reigisters on the registration page (/account/create), he has to insert a date of birth (dob).
By default, the date of birth consists of 3 text-boxes. I have modified the file at /app/design/frontend/base/default/template/customer/widget.
So, instead of text-boxes there are now 3 select-boxes where the user can select a date
However, when all information is filled in correctly and you click on the "submit" button nothing happens (no errors, messages or anything).
Any idea on how to make the "submit" button work again?
Thanks
Edit:
The id's of the are the same as the one's used by the "". I've posted the code that I have changed
I've made 2 functions that print the options's element:
function getOptions($minValue, $maxValue)
{
$options = "";
for ($count = $minValue; $count <= $maxValue; $count++)
{
$options = $options . '<option value="' . $count . '">' . $count . '</option>';
}
return $options;
}
function getYears()
{
$years = "";
$currentYear = date('Y');
for ($count = 1900; $count <= $currentYear; $count++)
{
$years = $years . '<option value="' . $count;
if ($count == '1980')
{
$years = $years . '" selected="selected"';
}
$years = $years . '">' . $count . '</option>';
}
return $years;
}
And i've changed the input type=text to select
$this->setDateInput('d',
'<div class="dob-day">
<label for="' . $this->getFieldId('day') . '">' . $this->__('DD') . '</label>
<select id="' . $this->getFieldId('day') . '" name="' . $this->getFieldName('day') . '" title="' . $this->__('Day') . '" class="validate-select" ' . $this->getFieldParams() . '>' . getOptions(1,31) . '
</select>
</div>
<br />');
$this->setDateInput('m',
'<div class="dob-month">
<label for="' . $this->getFieldId('month') . '">' . $this->__('MM') . '</label>
<select id="' . $this->getFieldId('month') . '" name="' . $this->getFieldName('month') . '" title="' . $this->__('Month') . '" class="validate-select"' . $this->getFieldParams() . '>' . getOptions(1,12) . '
</select>
</div>
<br />');
$this->setDateInput('y',
'<div class="dob-year">
<label for="' . $this->getFieldId('year') . '">' . $this->__('YYYY') . '</label>
<select id="' . $this->getFieldId('year') . '" name="' . $this->getFieldName('year') . '" title="' . $this->__('Year') . '" class="validate-select"' . $this->getFieldParams() . '>' . getYears() . '
</div>'
);

Answer 1

Replace/create dob.phtml file located in app/design/frontend/[package-name]/default/template/customer/widget/
https://gist.github.com/ncla/7794502 (tested on Magento 1.8 community edition)
Accepted answer might work, but hiding inputs seems unacceptable. Also setDateInput, getSortedDateInputs methods are unnecessary, as you pass them HTML just to get them back.
If you try converting dob.phtml from input boxes to drop down boxes, Magento form validation will fail (throw JS error) because it can't find "day" input. So I just override Varien.DOB initialize function to select correct elements.

Answer 2

Plz replace the dob.phtml in
app/design/frontend/base/default/template/customer/widget/
to follwing code and override new field to old with the help of css
/////////////////////////////
<?php echo $this->getLayout()->createBlock('customer/widget_dob')
->setDate($this->getCustomer()->getDob())
->toHtml() ?>
// For checkout/onepage/billing.phtml:
<?php echo $this->getLayout()->createBlock('customer/widget_dob')
->setDate($this->getCustomer()->getDob())
->setFieldIdFormat('billing:%s')
->setFieldNameFormat('billing[%s]')
->toHtml() ?>
/* NOTE: Regarding styles - if we leave it this way, we'll move it to boxes.css
Alternatively we could calculate widths automatically using block input parameters.
*/
/**
* #see Mage_Customer_Block_Widget_Dob
*/
<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
$this->setDateInput('d',
'<div class="dob-day">
<input type="text" 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>'
);?>
<select name="nday" id="nday" onchange="getElementById('<?php echo $this->getFieldId('day');?>').value=this.value" style="width:90px;">
<option value="">Select</option>
<?php
for($i=1;$i<=31;$i++)
{
echo "<option value='".$i."'>".$i."</option>";
}
?>
</select>
<select name="nmon" id="nmon" onchange="getElementById('<?php echo $this->getFieldId('month');?>').value=this.value" style="width:90px;">
<option value=''>Select</option>
<?php echo '<option value="">'.$this->__("Select").'</option>'.'<option value="01">'.$this->__("January").'</option>'.'<option value="02">'.$this->__("February").'</option>'.'<option value="03">'.$this->__("March").'</option>'.'<option value="04">'.$this->__("April").'</option>'.'<option value="05">'.$this->__("May").'</option>'.'<option value="06">'.$this->__("June").'</option>'.'<option value="07">'.$this->__("July").'</option>'.'<option value="08">'.$this->__("August").'</option>'.'<option value="09">'.$this->__("September").'</option>'.'<option value="10">'.$this->__("October").'</option>'.'<option value="11">'.$this->__("November").'</option>'.'<option value="12">'.$this->__("December").'</option>'; ?>
</select>
<select name="nyear" id="nyear" onchange="getElementById('<?php echo $this->getFieldId('year');?>').value=this.value" style="width:90px;">
<option value="">Select</option>
<?php
for($j=date('Y')-80;$j<=date('Y');$j++)
{
echo "<option value='".$j."'>".$j."</option>";
}
?>
</select>
</p>
<?php
$this->setDateInput('m',
'<div class="dob-month">
<input type="text" 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>'
);
$this->setDateInput('y',
'<div class="dob-year">
<input type="text" 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>'
);
?>
<?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[
var customer_dob = new Varien.DOB('.customer-dob', <?php echo $this->isRequired() ? 'true' : 'false' ?>, '<?php echo $this->getDateFormat() ?>');
//]]>
</script>
////////////////////////////
it work fine .this is just an idea.......
enjoy

Answer 3

Thats how I did it. Maybe someone can use it
Grab the dob code from some site or from Magento default theme
Create your own widget template in your theme folder, for example customer/widget/dob-custom.phtml
Call this widget in your template file, for example
echo $this->getLayout()->createBlock('customer/widget_dob')->setTemplate('customer/widget/dob-custom.phtml')->toHtml();

Answer 4

The issue I think is because the format of the DD is not correct. You are generating a day like 1, 2, 3, 4... while it should be 01, 02, 03, 04,.. etc..
Regards!

Answer 5

I recently switched from ncla's solution to this:
http://www.endreywalder.com/blog/change-date-of-birth-field-to-select-boxes-in-magento/
Instead of displaying 01-12 for months, this will output the actual names which I like much better.
Tested on Magento 1.9.2