jQuery Forum

I'm trying to set the minimum value of the to field based on the selection in the from field.

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);

});