Here i have explained how to use jQuery UI datepicker with animation.

Step 1: Attach below CSS and jQuery files inside head tag.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>	
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Step 2: Add below HTML Markup inside body tag.

<input type="text" id="flightDepCal" placeholder="Depart">
<input type="text" id="flightReturnCal" placeholder="Return">

Step 3: Add the below javascript with script tag.

$( function() {		
$( "#flightDepCal,#flightReturnCal" ).datepicker( {
showButtonPanel:true, changeMonth:true, changeYear:true, numberOfMonths:1, minDate: 0 }); 
$("#flightDepCal,#flightReturnCal" ).datepicker( "option", "dateFormat", "d M, y" );
	
/*Add animation*/
$("#flightDepCal,#flightReturnCal").datepicker("option", "showAnim", 'blind');
		
/*change arrival calander if departure is selected*/	 
$("#flightDepCal").change(function(){
	 		 
var bla = $("#flightDepCal").val(); //Get 
$("#flightReturnCal").val(bla); //Set
});			
} );

Javascript highlights

This line is being used to add animation you can change animation also

$("#flightDepCal,#flightReturnCal").datepicker("option", "showAnim", 'blind');

This line is being used to show date format you may change date format if you do not like eg: 3 Sep, 19

$("#flightDepCal,#flightReturnCal" ).datepicker( "option", "dateFormat", "d M, y" );

Finally page should look like this.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Animations</title>	

<!--jquery ui css-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!--jquery-->	
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>	

<!--jquery ui js-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	
<script>
$( function() {		
$( "#flightDepCal,#flightReturnCal" ).datepicker( {
showButtonPanel:true, changeMonth:true, changeYear:true, numberOfMonths:1, minDate: 0 }); 
$("#flightDepCal,#flightReturnCal" ).datepicker( "option", "dateFormat", "d M, y" );
	
/*Add animation*/
$("#flightDepCal,#flightReturnCal").datepicker("option", "showAnim", 'blind');
		
/*change arrival calander if departure is selected*/	 
$("#flightDepCal").change(function(){
	 		 
var bla = $("#flightDepCal").val(); //Get 
$("#flightReturnCal").val(bla); //Set
});			
} );
</script>   
</head>

<body>
<input type="text" id="flightDepCal" placeholder="Depart">
<input type="text" id="flightReturnCal" placeholder="Return">
</body>
</html>

Screenshot

Add Comments