Here is all the code for the page. CSS, HTML and JQUERY.
The last thing in jquery section is what isn't working properly.
Any suggestions would be great.
DIV.ui-datepicker {FONT-SIZE: 10px}
div.week {DISPLAY: none}
DIV.year {DISPLAY: none}
DIV.quarter {DISPLAY: none}
DIV.presets {DISPLAY: none}
DIV.daily {DISPLAY: none}
DIV#debug {POSITION: absolute; LEFT: 50px; TOP: 2px}
DIV.ranges {BORDER: 3px ridge lightgrey; HEIGHT: 190px; WIDTH: 535px; TEXT-ALIGN: center;}
DIV#one {POSITION: absolute; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; LEFT: 20px; TOP: 20px; PADDING-RIGHT: 5px; spacing: 5px}
DIV#two {POSITION: absolute; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; LEFT: 20px; TOP: 245px; PADDING-RIGHT: 5px; spacing: 5px}
DIV.title {BORDER: 3px ridge lightgrey; WIDTH: 100px; POSITION: relative; FLOAT: left; LEFT: 5px; Z-INDEX: 2; TOP: -12px; BACKGROUND-COLOR: white}
DIV.required {FONT-SIZE: 14px; WIDTH: 100%; FLOAT: left; }
DIV.current {WIDTH: 100%; FLOAT: left; }
DIV.selectbutton {WIDTH: 100%; FLOAT: left; }
DIV.to {WIDTH: 55px; FLOAT: left; TEXT-ALIGN: center;}
INPUT.to {WIDTH: 170px; FLOAT: right; TEXT-ALIGN: center; MARGIN-RIGHT: 80px}
SELECT.from {WIDTH: 210px;FLOAT: left; MARGIN-LEFT: 20px;}
SELECT.to {WIDTH: 210px; FLOAT: right; MARGIN-RIGHT: 20px}
SELECT.presets {WIDTH: 300px; BORDER-LEFT: #ff0000 0px solid}
DIV#submit {HEIGHT: 50px; WIDTH: 550px; POSITION: absolute; LEFT: 40px; TOP: 460px}
INPUT#submit {WIDTH: 250px}
.btn {CURSOR: pointer; FONT-SIZE: 12px; TEXT-DECORATION: none; BORDER-TOP: #4e6096 1px solid; FONT-FAMILY: Arial; BORDER-RIGHT: #4e6096 1px solid; BORDER-BOTTOM: #4e6096 1px solid; COLOR: #ffffff; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; MARGIN: 5px; BORDER-LEFT: #4e6096 1px solid; DISPLAY: inline-block; PADDING-RIGHT: 5px; BACKGROUND-COLOR: #7892c2; -webkit-border-radius: 5px; -moz-border-radius: 5px; -moz-box-shadow: 0px 0px 0px 2px #9fb4f2; -webkit-box-shadow: 0px 0px 0px 2px #9fb4f2; box-shadow: 0px 0px 0px 2px #9fb4f2; border-radius: 5px; text-shadow: 0px 1px 0px #283966}
.btn:hover {BACKGROUND-COLOR: #476e9e}
.btnsel {CURSOR: pointer; FONT-SIZE: 12px; TEXT-DECORATION: none; BORDER-TOP: #4e6096 1px solid; FONT-FAMILY: Arial; BORDER-RIGHT: #4e6096 1px solid; BORDER-BOTTOM: #4e6096 1px solid; COLOR: #ffffff; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; MARGIN: 5px; BORDER-LEFT: #4e6096 1px solid; DISPLAY: inline-block; PADDING-RIGHT: 5px; BACKGROUND-COLOR: #476e9e; -webkit-border-radius: 5px; -moz-border-radius: 5px; -moz-box-shadow: 0px 0px 0px 2px #476e9e; -webkit-box-shadow: 0px 0px 0px 2px #476e9e; box-shadow: 0px 0px 0px 2px #476e9e; border-radius: 5px; text-shadow: 0px 1px 0px #283966}
<div id="debug">
<INPUT id="DateInterval_one" name="DateInterval_one"></INPUT>
<INPUT id="from_one" name="Start_Date_one" ></INPUT>
<INPUT id="to_one" name="End_Date_one" ></INPUT>
<INPUT id="DateInterval_two" name="DateInterval_two"></INPUT>
<INPUT id="from_two" name="Start_Date_two" ></INPUT>
<INPUT id="to_two" name="End_Date_two" ></INPUT>
</div>
<DIV id="one" class="ranges"><DIV class="title">Range One </DIV></DIV>
<DIV id="two" class="ranges"><DIV class="title">Range Two </DIV></DIV>
<DIV id="submit"><INPUT id="submit" type="submit" value="Update Selections"></INPUT></DIV>
var fromquarter = [{val:'',text:'Select'},{val:'12/21/2014',text:'2ND QTR FISC 15 - 12/21/2014'},{val:'3/15/2015',text:'3RD QTR FISC 15 - 3/15/2015'},{val:'6/7/2015',text:'4TH QTR FISC 15 - 6/7/2015'},{val:'10/4/2015',text:'1ST QTR FISC 16 - 10/4/2015'},{val:'12/27/2015',text:'2ND QTR FISC 16 - 12/27/2015'}];
var toquarter = [{val:'',text:'Select'},{val:'3/14/2015',text:'2ND QTR FISC 15 - 3/14/2015'},{val:'6/6/2015',text:'3RD QTR FISC 15 - 6/6/2015'},{val:'10/3/2015',text:'4TH QTR FISC 15 - 10/3/2015'},{val:'12/26/2015',text:'1ST QTR FISC 16 - 12/26/2015'}];
var fromweek = [{val:'',text:'Select'},{val:'11/30/2014',text:'WEEK 10 FISC 15 - 11/30/2014'},{val:'12/7/2014',text:'WEEK 11 FISC 15 - 12/7/2014'},{val:'12/14/2014',text:'WEEK 12 FISC 15 - 12/14/2014'},{val:'12/21/2014',text:'WEEK 13 FISC 15 - 12/21/2014'},{val:'12/28/2014',text:'WEEK 14 FISC 15 - 12/28/2014'}];
var toweek = [{val:'',text:'Select'},{val:'12/6/2014',text:'WEEK 10 FISC 15 - 12/6/2014'},{val:'12/13/2014',text:'WEEK 11 FISC 15 - 12/13/2014'},{val:'12/20/2014',text:'WEEK 12 FISC 15 - 12/20/2014'},{val:'12/27/2014',text:'WEEK 13 FISC 15 - 12/27/2014'}];
var fromyear = [{val:'',text:'Select'},{val:'10/4/2015',text:'2016 - 10/4/2015'}];
var toyear = [{val:'',text:'Select'},{val:'10/1/2016',text:'2016 - 10/1/2016'}];
var presetdates = [{val:'',text:'Select Preset'},{val:'prev13wk' ,text:'Previous 13 Weeks'},{val:'last13wk' ,text:'Last Year Previous 13 Weeks'}];
var selreport = [{val:'one',text:'Currently Selected Report: 5 - Pantry/Market Basket Analysis <br> This Date Range is Required' },{val:'two',text:'Does not apply to Currently Selected Report: 5 - Pantry/Market Basket Analysis' }];
$('.ranges').append('<div class="required">placeholder-is range required</div>');
$('.ranges').append('<div class="current" >placeholder-current selection</div>');
$('.ranges').append('<div class="selectbutton"> </div>');
$('.selectbutton').prepend('<input type="button" class="btn" name="presets" value="presets">');
$('.selectbutton').prepend('<input type="button" class="btn" name="year" value="year">');
$('.selectbutton').prepend('<input type="button" class="btn" name="quarter" value="quarter">');
$('.selectbutton').prepend('<input type="button" class="btn" name="week" value="week">');
$('.selectbutton').prepend('<input type="button" class="btn" name="daily" value="daily">');
$('.ranges').append('<div class="daily" ></div>');
$('.ranges').append('<div class="week" ></div>');
$('.ranges').append('<div class="quarter"></div>');
$('.ranges').append('<div class="year" ></div>');
$('.ranges').append('<div class="presets"></div>');
$('div.daily').prepend('<input type="text" id="dailyto" class="to" >');
$('div.daily').prepend('<input type="text" id="dailyfrom" class="from" >');
$('input.from').datepicker({
dateFormat: "mm/dd/yy",
minDate: "07/02/2017",
maxDate: "07/29/2017",
setDate: "07/04/2017",
onSelect: function(){
var startDate = $(this).datepicker("getDate");
var clst = $(this).closest('.ranges').attr('id');
var nextTo = $('div#'+clst+' > input.to');
nextTo.datepicker('option','minDate',startDate);
}
});
$('input.to').datepicker({
dateFormat:"mm/dd/yy",
maxDate:"07/29/2017" ,
});
function presetselect(){
var selb = $('<select class="presets">').appendTo('div.ranges > .presets');
$(presetdates).each(function(){
selb.append($('<option >').attr('value',this.val).text(this.text));
});
};
presetselect();
$('select.presets').change(function(){
var clst = $(this).closest('.ranges').attr('id');
$('div#debug > input#DateInterval_'+clst).val($(this).val());
});
function selectfrom(intrvl){
var intrvl = intrvl;
if(intrvl == "quarter"){arraytouse=fromquarter;}
if(intrvl == "week" ){arraytouse=fromweek; }
if(intrvl == "year" ){arraytouse=fromyear; }
var selbld = $('<select name="from" class="from '+intrvl+'">')
.appendTo('div.ranges > .'+intrvl+' ');
$(arraytouse).each(function(){
selbld.append($('<option>').attr('value',this.val).text(this.text));
});
};
selectfrom("week" );
selectfrom("quarter");
selectfrom("year" );
$('.btn').click(function(){
var clst = $(this).closest('.ranges').attr('id');
var interval = $(this).val();
$('div#debug > input#DateInterval_'+clst).val(interval);
$('div#'+clst).find('input[type=button]').removeClass('btnsel');
$('div#'+clst).find('input[type=button]').addClass('btn');
$('div#'+clst).find('input[type=button][value='+interval+']')
.addClass("btnsel");
$('div#'+clst).find('.presets,.year,.quarter,.week,.daily')
.hide();
$('div#'+clst).find('.'+interval).fadeIn('1000');
});
function selectto(intrvl, range, fromvalue){
var intrvl = intrvl;
if(intrvl == "quarter"){arraytouse=toquarter;}
if(intrvl == "week" ){arraytouse=toweek;}
if(intrvl == "year" ){arraytouse=toyear;}
$('<div class="to">To</div>')
.appendTo('div#'+range+' > .'+intrvl+' ');
var selbld = $('<select name="to" class="to '+intrvl+'">')
.appendTo('div#'+range+' > .'+intrvl+' ');
var fromdate = new Date(fromvalue);
$(arraytouse).each(function(){
var arraydate = new Date(this.val);
if( arraydate > fromdate ) {
selbld.append($('<option >')
.attr('value',this.val).text(this.text));
}
});
};
function fromto(thisObj){
var range = $(thisObj).closest('.ranges').attr('id');
var interval = $(thisObj).parent().attr('class');
var fromvalue=$(thisObj).val();
$('div#'+range+' > .'+interval+' .to').remove();
selectto(interval,range,fromvalue);
};
$('select.from').on('change',function(){
fromto($(this));
});
/* THIS IS THE SECTION THAT HAS PROBLEMS */
/* IT WORKS FOR FROM BUT NOT FOR TO */
$('select').on('change',function(){
alert("main change");
var clst = $(this).closest('.ranges').attr('id');
var tc = $(this).attr('name');
$('div#debug > input#'+tc+'_'+clst).val($(this).val());
alert("stuff="+clst+" "+tc);
});