How to Calculate Years Between Two Dates in jQuery

Submitted by janobe on Tuesday, August 2, 2016 - 14:47.
When you are struggling to calculate your age by your date of birth, now here's a solution to your problem. In this tutorial, I will teach you how to Calculate Years Between Two Dates in jQuery. This is a simple yet powerful method of calculating date interval by years. Simply follow the step by step guide below.

Let's get started:

Step 1. Create a landing page and name it "index.php". Step 2. Create a layout of your design.
  1.  <!-- bootstrap plugins -->
  2. <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  3. <!-- datetime picker plugins -->
  4. <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
  5.  
  6. <style type="text/css">
  7.   .container{
  8.     width: 40%;  
  9.     padding: 12px;
  10.   }
  11. .container  .row{
  12.   padding-bottom: 2px;
  13.   padding-left: 2px;
  14. }
  15. .container  #result {  
  16.   display: none;
  17.   background: #16eedc;
  18.   color: #fff;
  19.   padding: 1px 0 0 1px;
  20.   font-size: 21px;
  21.    border: 1px solid transparent;
  22.   border-radius: 5px;
  23.   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.099);
  24.         box-shadow: 0 3px 3px rgba(0, 0, 0, 0.099);
  25.  
  26.   }
Step 3. Create a page design.
  1. <div class="container">
  2. <div class="page-header"><h1>Age</h1></div>
  3. <div class="box col-md-12">
  4.   <div class="row">
  5.         <div class='col-sm-12'>
  6.             <div class="form-group">
  7.             <label class="col-md-4">BirthDate:</label>
  8.                 <div class='input-group date col-md-8' id='birthdate'>
  9.                     <input type='text' class="form-control"  id="d1" />
  10.                     <span class="input-group-addon">
  11.                         <span class="glyphicon glyphicon-calendar"></span>
  12.                     </span>
  13.                 </div>
  14.             </div>
  15.         </div>
  16.     </div>
  17.  
  18.     <div class="row">
  19.         <div class='col-sm-12'>
  20.             <div class="form-group">
  21.             <label class="col-md-4">PresentDate:</label>
  22.                 <div class='input-group date col-md-8' id='presentdate'>
  23.                     <input type='text' class="form-control" id="d2" />
  24.                     <span class="input-group-addon">
  25.                         <span class="glyphicon glyphicon-calendar"></span>
  26.                     </span>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </div>
  31.      <div class="row">
  32.       <div class='col-sm-12'>
  33.         <div class='col-sm-8  pull-right'>
  34.             <div class="form-group">
  35.                     <input type='submit' id="calc"  value ="calculate" class="btn btn-info " />
  36.             </div>
  37.         </div>
  38.       </div>
  39.     </div>
  40.      <div class="row">
  41.         <div class='col-sm-12'>
  42.             <div  id="result" class="form-group">
  43.                      
  44.             </div>
  45.         </div>
  46.     </div>
  47. </div>
  48. </div>
Step 4. Create a script for calculating years between two dates.
  1. <!-- jQuery plugins -->
  2. <script type="text/javascript" src="jquery/jquery.min.js"></script>  
  3. <!-- datetime picker plugins -->
  4. <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
  5.   <script type="text/javascript">
  6.   $(document).ready( function(){
  7.     /*get the date interval*/
  8.      var age = {
  9.    
  10.         /*for years*/
  11.         years: function(d1, d2) {
  12.             return d2.getFullYear()-d1.getFullYear();
  13.         }
  14.     }
  15. /* set the click event handler of a button */
  16.     $("#calc").click(function(){
  17.       /* Statement */
  18.        $("#result").hide();
  19.        $("#result").fadeIn(900,0);
  20.        $("#result").html(function() {
  21.             /*get the given date in the textbox*/
  22.             var birthdate = document.getElementById("d1").value;
  23.             var presentdate = document.getElementById("d2").value;
  24.             /*set a variable for displaying the result*/
  25.             var result ;
  26.             /*set a new date*/
  27.             var d1 = new Date(birthdate);
  28.             var d2 = new Date(presentdate);  
  29.             /*validating the result*/
  30.             if(presentdate=='' || birthdate==''){
  31.               result = 'Please enter the dates!';
  32.             }else{
  33.               result = 'Result ' +
  34.            '<hr/> Your age is  :' +  age.years(d1, d2) +
  35.            ' years old ' +
  36.             '<hr/>' ;
  37.             }
  38.             /*display the validated result*/        
  39.            return result;
  40.        });    
  41.     })
  42.   })
  43.  
  44.  $(function () {
  45.           $('#birthdate').datetimepicker({
  46.              // format: 'MM, dd, yyyy',
  47.               format: 'mm/dd/yyyy',
  48.               todayBtn:  1,
  49.               autoclose: 1,
  50.               todayHighlight: 1,
  51.               startView: 2,
  52.               minView: 2,
  53.  
  54.           });
  55.       });
  56.  
  57.  $(function () {
  58.           $('#presentdate').datetimepicker({
  59.               // format: 'MM, dd, yyyy',
  60.                format: 'mm/dd/yyyy',
  61.               todayBtn:  1,
  62.               autoclose: 1,
  63.               todayHighlight: 1,
  64.               startView: 2,
  65.               minView: 2,
  66.           });
  67.   });
  68.  
  69.   </script>
For all students who need a programmer for your thesis system or anyone who needs a source code in any programming languages. You can contact me @ : Email – [email protected] Mobile No. – 09305235027 – tnt
Tags
jQuey
how to calculate years beween two date. date interval by years

Add new comment

About text formats
  • 320 views