Date Interval with jQuery

In this tutorial, I will teach you on how to get the date interval between two dates with jQuery. This method will help you calculate the difference between two dates in year(s), month(s),week(s) and day(s).

Let’s begin:

Create a page and name it index.html
Do these following codes for the layout of the design.

<!-- bootstrap plugins -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- datetime picker plugins -->
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"> 
<style type="text/css">
 .container{ 
 width: 30%; 
 padding: 10px; 
 }
.container .row{
 padding-bottom: 3px;
 padding-left: 3px;
}
.container #output { 
 display: none; 
 background: #428bca;
 color: #fff; 
 padding: 2px 0 0 2px;
 font-size: 20px;
 border: 1px solid transparent;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.099);
 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.099);

 }
</style>

Do the following codes for the design of the page.

<div class="container">
<div class="page-header"><h1>Date Interval</h1></div>
<div class="box col-md-10">
 <div class="row">
   <div class='col-sm-10'>
     <div class="form-group">
       <label class="col-md-2">From:</label>
       <div class='input-group date col-md-10' id='from'>
        <input type='text' class="form-control" id="d1" />
         <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
         </span>
       </div>
     </div>
    </div>
  </div> 
  <div class="row"> 
    <div class='col-sm-10'>
     <div class="form-group">
        <label class="col-md-2">To:</label>
        <div class='input-group date col-md-10' id='to'>
          <input type='text' class="form-control" id="d2" />
          <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
          </span>
       </div>
    </div>
   </div> 
  </div>
 <div class="row">
   <div class='col-sm-10 pull-right'>
     <div class="form-group"> 
      <input type='submit' id="calculate" value ="Calculate" class="btn btn-primary " /> 
     </div>
   </div> 
 </div>
 <div class="row">
   <div class='col-sm-12'>
     <div id="output" class="form-group"></div>
   </div> 
  </div>
 </div> 
</div>

Create a script for the datetime picker.

<!-- jQuery plugins -->
<script type="text/javascript" src="jquery/jquery.min.js"></script> 
<!-- datetime picker plugins -->
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"> 
 $(function () {
   $('#from').datetimepicker({ 
     // format: 'MM, dd, yyyy', 
     format: 'mm/dd/yyyy',
     todayBtn: 1,
     autoclose: 1,
     todayHighlight: 1,
     startView: 2,
      minView: 2, 
    });
 });

$(function () {
   $('#from').datetimepicker({ 
     // format: 'MM, dd, yyyy', 
     format: 'mm/dd/yyyy',
     todayBtn: 1,
     autoclose: 1,
     todayHighlight: 1,
     startView: 2,
      minView: 2, 
    });
});
</script>

finally, create a method for getting the interval of two dates.

<script type="text/javascript"> 
$(document).ready( function(){ 
 
 if(to=='' || from==''){
 output = 'Please enter the dates!';
 }else{
 output = 'Date interval between ' + from + ' and ' + to + 
 '<hr/> In years :' + dateInterval.years(d1, d2) + 
 '<br/> In months :' + dateInterval.months(d1, d2) + 
 '<br/> In weeks :' + dateInterval.weeks(d1, d2) +
 '<br/> In days :' + dateInterval.days(d1, d2) + 
 '<hr/>' ;
 } 
  
 return output;
 }); 
 })
 })
</script>

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

Email – [email protected]
Mobile No. – 09305235027 – tnt

Download Sourcecode

Leave a Comment Cancel reply