Response title
This is preview!
datepicker setting minDate in multiple pairs of fields.
in Using jQuery UI
•
5 years ago
I have a page which uses multiple pairs of fields
I'm trying to set the minimum value of the to field based on the selection in the from field.
<div class="ranges" id="one "><input type="text" class="from"><input type="text" class="to"></div>
<div class="ranges" id="two "><input type="text" class="from"><input type="text" class="to"></div>
<div class="ranges" id="three"><input type="text" class="from"><input type="text" class="to"></div>
<div class="ranges" id="four "><input type="text" class="from"><input type="text" class="to"></div>
<div id="debug">
<input type="text" name="Start_Date_one" id="Start_Date_one" value="">
<input type="text" name="End_Date_one" id="End_Date_one" value="">
<input type="text" name="Start_Date_two" id="Start_Date_two" value="">
<input type="text" name="End_Date_two" id="End_Date_two" value="">
<input type="text" name="Start_Date_three" id="Start_Date_three" value="">
<input type="text" name="End_Date_three" id="End_Date_three" value="">
<input type="text" name="Start_Date_four" id="Start_Date_four" value="">
<input type="text" name="End_Date_four" id="End_Date_four" value="">
</div>
$('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({ dateFormat: 'mm/dd/yy' }).val();
var fromDate = $(this).datepicker("getDate");
var clst = $(this).closest('.ranges').attr('id');
$(this).next().datepicker({ 'option','minDate',fromDate });
$('div#debug > input#Start_Date_'+clst).val(startDate);
}
});
$('input.to').datepicker({
dateFormat:"mm/dd/yy",
maxDate: '+2M'
});
$(document).on('change','input.to',function(){
var clst = $(this).closest('.ranges').attr('id');
$('div#debug > input#End_Date_'+clst).val($(this).val());
});
1