Skip to content

Instantly share code, notes, and snippets.

@dele454 dele454/dob.phtml
Last active Jun 1, 2018

Embed
What would you like to do?
Magento DOB widget with DOB Validation
<?php
/**
* @see Mage_Customer_Block_Widget_Dob
*/
?>
<label class="dob-label" for="<?php echo $this->getFieldId('month')?>"<?php if ($this->isRequired()) { echo ' class="required"'; } ?>><?php echo $this->__('Birthday') ?></label>
<div class="customer-dob input-box">
<div class="dob-year">
<?php $currentYear = intval(date("Y")); ?>
<select name="<?php echo $this->getFieldName('year'); ?>" id="<?php echo $this->getFieldId('year'); ?>">
<option value="">YYYY</option>
<?php for ($i = $currentYear; $i >= $currentYear - 60; $i--): ?>
<option value="<?php echo $i; ?>" <?php echo ($i==$this->getYear()) ? "selected" : ""; ?>><?php echo $i; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="dob-month">
<select name="<?php echo $this->getFieldName('month'); ?>" id="<?php echo $this->getFieldId('month'); ?>">
<option value="">MM</option>
<?php for ($i = 1; $i <= 12; $i++): ?>
<?php $month = (strlen($i) == 1) ? "0".$i : $i; ?>
<option value="<?php echo $month; ?>" <?php echo ($i==$this->getMonth()) ? "selected" : ""; ?>><?php echo $month; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="dob-day">
<select name="<?php echo $this->getFieldName('day'); ?>" id="<?php echo $this->getFieldId('day'); ?>">
<option value="">DD</option>
<?php for ($i = 1; $i <= 31; $i++): ?>
<?php $day = (strlen($i) == 1) ? "0" . $i : $i; ?>
<option value="<?php echo $day; ?>" <?php echo ($i==$this->getDay()) ? "selected" : ""; ?>><?php echo $day; ?></option>
<?php endfor; ?>
</select>
</div>
<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 DOBSelects = Class.create(Varien.DOB, {
initialize: function(selector, required, format) {
var el = $$(selector)[0];
var container = {};
container.day = Element.select(el, '.dob-day select')[0];
container.month = Element.select(el, '.dob-month select')[0];
container.year = Element.select(el, '.dob-year select')[0];
container.full = Element.select(el, '.dob-full input')[0];
container.advice = Element.select(el, '.validation-advice')[0];
new Varien.DateElement('container', container, required, format);
}
});
var customer_dob = new DOBSelects('.customer-dob', <?php echo $this->isRequired() ? 'true' : 'false' ?>, '<?php echo $this->getDateFormat() ?>');
var year = $('year');
var month = $('month');
var day = $('day');
function daysInMonth(month,year) {
var dd = new Date(year, month, 0);
return dd.getDate();
}
function setDayDrop(dyear, dmonth, dday) {
var year = dyear.options[dyear.selectedIndex].value;
var month = dmonth.options[dmonth.selectedIndex].value;
var day = dday.options[dday.selectedIndex].value;
var days = (year == '' || month == '') ? 31 : daysInMonth(month,year);
dday.options.length = 0;
dday.options[dday.options.length] = new Option('DD','DD');
for (var i = 1; i <= days; i++){
dday.options[dday.options.length] = new Option(i,i);
}
}
function setDay() {
setDayDrop(year,month,day);
}
year.observe('change', setDay);
month.observe('change', setDay);
//]]>
</script>
@dele454

This comment has been minimized.

Copy link
Owner Author

commented Oct 7, 2014

The original gist was from https://gist.github.com/iamncla/7794502 but it seems to have evaporated. I have hence modify it to include DOB validation in displaying the relevant days for each month based on what month was selected.

@renatodolce

This comment has been minimized.

Copy link

commented Sep 17, 2015

Hello @dele454, like your code and I'm on my website, but now would like to implement validation of 18 years old would like help me??

I researched and found some topics, but did not succeed in implementing:
http://magento.stackexchange.com/questions/9037/age-verification-varien-dateelement-vs-varien-dob
http://blog.speedupmate.com/post/54662500786/magento-wrap-date-of-birth-frontend-validation

Already grateful for the attention.

@subashvns

This comment has been minimized.

Copy link

commented Sep 14, 2017

good post it work proper

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.