Date Interval with jQuery

0
25

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
(Visited 50 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here