jQuery Simple Example

by inser

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="container">
  <select class="year">
  
  </select>
  <select class="month">
  
  </select>
  <select class="day">
  
  </select>
</div>

CSS

select {
  padding: 5px;
  margin: 10px;
  display: inline-block;
}

JavaScript

$(function() {
	var monthNames = ["January", "February", "March", "April", "May", "June",
  		"July", "August", "September", "October", "November", "December" ],
      currentDate = new Date();      

  function init() {
  	var YEARS_RANGE = 100,
    	i;      
      
    for(i = 0, year = currentDate.getFullYear(); i <= YEARS_RANGE; i++) {
    	$('.year').append(createOption(year--));
    }
    
    $.each(monthNames, function(index) {
    	$('.month').append(createOption(index, this));
    });
    
    for(i = 0; i < 31; i++) {
    	$('.day').append(createOption(i, i + 1));
    }

		//setDate(currentDate);
  }
  
  function Calendar() {
  	var settings = {
    	yearRange: 100
    };
  
  	var year,
    	month,
      day;
      
    var ranges = {
    	year: { },
      month: { },
      day: { }
    }
      
    function getMaxDate() {
    	return new Date();
    }
  
  	this.setDate = function(date) {
    	ranges = initRanges();
      
      if(date.getFullYear() === ranges.year.max) {
      	ranges.month.max = getMaxDate().getMonth();
        var month = date.getMonth();
        
        if(month > ranges.month.max) {
        	month = 1;
        }
        
        if(month === ranges.month.max)
      }
    }
    
    function initRanges() {
    	var currDate = getMaxDate();
    
    	return {
      	year: {
          min: currDate.getFullYear() - settings.yearRange,
          max: currDate.getFullYear()
        },
        month: {
        	min: 1,
          max: 12
        },
        day: {
        	min: 1,
          max: 31
        }
      }
    }
    
    this.init(date) {
    	return setDate(date || new Date());
    }
  }
  
  function createOption(val, text) {
  	return $('<option>')
    	.val(val)
      .text(text || val);
  }
  
  init();
});