Auto fill future date based on date selected in a field

Beginners - Learning PHP
#1

I have a form. First Date field is Order Date. When i select the Order date, i want the 2nd field which is Delivery Date to auto populate 10days future date, of what i have selected in Order date.

<div class="col-md-6 form-group">
                                <label for="pickup_date">Order Date</label>
                                <input type="date" class="form-control" id="pickup_date"  name="pickup_date">
                            </div>
                            <div class="col-md-6 form-group">
                                <label for="delivery_date">Delivery Date</label>
                                <input type="date" class="form-control" id="delivery_date" name="delivery_date">
                            </div>
#2
  • Edit:

I see now you are using Bootstrap and the default date type for the field…

Your second field is ‘also’ a datepicker …

Are you saying you want that calendar options to START 10 days form the previous Order Date selection?

Or will this not be a datepicker field… and just a plain input field that auto-populates?

#3

There will be a date picker on both the fields, so that date can be entered manually.
The default date should be dynamically +10days of pickup date.
Eg. If 1/10/2020 is selected as pickup date, then 11/10/2020 should be dynamically filled in the delivery date.
I should manually be able to change this 11/10/2020

#4

So your saying/requesting that the second ‘datepicker’ NOT be allowed to select a date BEFORE the 10 day addition to the Order Date?

Update: I see your edits…

** Wouldnt that be: 1/20/2020 then if you are doing 10 days? (not 1 month)

#5

I am assuming the date format as dd/mm/yyyy

#6
  • Not sure why these details are like pulling teeth? (why isnt this stuff provided with your initial request for help?)

Anyways…

this should work,… you can update it now to fit your dd/mm/yyyy format you need make sure you:

  • have set date attributes on your fields
  • that have leading/padded 0 for month and date

** Iused some php tags to set the initial dates for the pickers fields in the form… (you can set them however you like)

   <script type="text/javaScript"> 
	//jQuery (event actions)
	document.addEventListener("DOMContentLoaded", function(event) {		
	
	//dropdown listener
	$("#pickup_date").change(function () {
		var orderDate = this.value;
		//console.log("Value Check: " + orderDate);
		
		if(orderDate != ''){				
			
			var plusDate = new Date(orderDate);							
			plusDate.setDate(plusDate.getDate() + 10); //order date + 10 days		
			
			var deliveryMonth = ("0" + (plusDate.getMonth() + 1)).slice(-2).toString(); //needs leadign 0 or wont work!
			var deliveryDay = ("0" + plusDate.getDate()).slice(-2).toString(); //needs leadign 0 or wont work!
			var deliveryYear = plusDate.getFullYear().toString();			
			
			//set attributes on second picker & val
			$("#delivery_date").attr("max","");	//set or leave blank for no limit			
			$("#delivery_date").attr("min", deliveryYear + '-' + deliveryMonth + '-' + deliveryDay);
			$("#delivery_date").attr("value", deliveryYear + '-' + deliveryMonth + '-' + deliveryDay);
			$("#delivery_date").val(deliveryYear + '-' + deliveryMonth + '-' + deliveryDay);
				
		});			
		
	});	
				
   </script>					
					
		


    <div class="col-md-6 form-group">
    	<label for="pickup_date">Order Date</label>
    	<input type="date" class="form-control" id="pickup_date"  name="pickup_date" value="<?=date('Y-m-d')?>" min="<?=date('Y-m-d')?>">
    </div>
    <div class="col-md-6 form-group">
    	<label for="delivery_date">Delivery Date</label>
    	<input type="date" class="form-control" id="delivery_date" name="delivery_date" value="<?=date('Y-m-d')?>" min="<?=date('Y-m-d')?>" max="<?=date('Y-m-d')?>">	
    </div>
1 Like
#7

Thank You so much, but you need to correctly close the javascript brackets. Check last 3 lines, before
ending script

<script type="text/javaScript"> 
    	//jQuery (event actions)
    	document.addEventListener("DOMContentLoaded", function(event) {		
    	
    	//dropdown listener
    	$("#pickup_date").change(function () {
    		var orderDate = this.value;
    		//console.log("Value Check: " + orderDate);
    		
    		if(orderDate != ''){				
    			
    			var plusDate = new Date(orderDate);							
    			plusDate.setDate(plusDate.getDate() + 10); //order date + 10 days		
    			
    			var deliveryMonth = ("0" + (plusDate.getMonth() + 1)).slice(-2).toString(); //needs leadign 0 or wont work!
    			var deliveryDay = ("0" + plusDate.getDate()).slice(-2).toString(); //needs leadign 0 or wont work!
    			var deliveryYear = plusDate.getFullYear().toString();			
    			
    			//set attributes on second picker & val
    			$("#delivery_date").attr("max","");	//set or leave blank for no limit			
    			$("#delivery_date").attr("min", deliveryYear + '-' + deliveryMonth + '-' + deliveryDay);
    			$("#delivery_date").attr("value", deliveryYear + '-' + deliveryMonth + '-' + deliveryDay);
    			$("#delivery_date").val(deliveryYear + '-' + deliveryMonth + '-' + deliveryDay);
    				
    		};			
    		
    	});	
    	    
    	});
    				
       </script>
#8

How do i set the min date as Order date?

$("#delivery_date").attr("min", deliveryYear + '-' + deliveryMonth + '-' + deliveryDay);

#9

The formatting issue is due to the forum… not my code… I’m also NOT seeing it the way you presented it… in my post it looks fine… and exactly what you posted?!

it works fine when tested locally.

Re: Your question…

Didnt you ask for the min (delivery) date to be 10 days after the order date?

I’m done helping until you can specifically and logically lay out your project requirements.

No more guessing, no more after the fact changes…

Bullet point out what you want done… what formats…etc…

Sponsor our Newsletter | Privacy Policy | Terms of Service