ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Date Interval with jQuery

dateintervalPIIn 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(){ 
 /*get the date interval*/
 var dateInterval = { 
 /*for days*/
 days: function(d1, d2) {
 var t1 = d1.getTime();
 var t2 = d2.getTime();
 return parseInt((t2-t1)/(24*3600*1000));
 },
 /*for weeks*/
 weeks: function(d1, d2) {
 var t1 = d1.getTime();
 var t2 = d2.getTime();
 return parseInt((t2-t1)/(24*3600*1000*7));
 },
 /*for months*/
 months: function(d1, d2) {
 var M1 = d1.getMonth();
 var M2 = d2.getMonth();
 var Y1 = d1.getFullYear();
 var Y2 = d2.getFullYear(); 
 return (M2+12*Y2)-(M1+12*Y1);
 },
 /*for years*/
 years: function(d1, d2) {
 return d2.getFullYear()-d1.getFullYear();
 }
 }
/* set the click event handler of a button */
 $("#calculate").click(function(){
 /* Statement */ 
 $("#output").hide();
 $("#output").fadeIn(900,0);
 $("#output").html(function() { 
 /*get the given date in the textbox*/
 var from = document.getElementById("d1").value;
 var to = document.getElementById("d2").value;
 /*set a variable for displaying the result*/
 var output ;
 /*set a new date*/
 var d1 = new Date(from);
 var d2 = new Date(to); 
 /*validating the result*/
 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/>' ;
 } 
 /*display the validated result*/ 
 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 – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt

 

Download Sourcecode

 

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!