Skip to content

Instantly share code, notes, and snippets.

@dele454
Last active June 1, 2018 13:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save dele454/288f1204222aa2ae6ae9 to your computer and use it in GitHub Desktop.
Save dele454/288f1204222aa2ae6ae9 to your computer and use it in GitHub Desktop.
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
Copy link
Author

dele454 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.

@renatodolza
Copy link

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
Copy link

good post it work proper

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment