JSFiddle - React, Tailwind, and code Playground

by Santosh J

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div class="container">
  <div class="row date-pick">
    <div class="col-md-12">
      <div class="well date-picker-box">
        <div class="col-md-6">
          <input type="text" class="form-control startDateTime" placeholder="Select start date and hour">
        </div>
        <div class="col-md-6">
          <input type="text" class="form-control endDateTime" placeholder="Select End date and hour">
        </div>
      </div>
    </div>
  </div>
        <input type='button' id='temp' value='getDiff'>
  <input type="text" class="form-control days-here" placeholder="Show Days difference here">
  <input type="text" class="form-control time-here" placeholder="Show Hours difference here">
</div>

JavaScript

$(function() {
  // defualt script for datetimepicket
  $('.startDateTime').datetimepicker({   
    //uncomment following code to enable debug mode
    //debug: true
  });
  $('.endDateTime').datetimepicker({
    //uncomment following code to enable debug mode
    //debug: true,
    
    useCurrent: false
  });
  $(".startDateTime").on("dp.change", function(e) {
    $('.endDateTime').data("DateTimePicker").minDate(e.date);
  });
  $(".endDateTime").on("dp.change", function(e) {
    $('.startDateTime').data("DateTimePicker").maxDate(e.date);
      CalcDiff()
  });
    

});
function CalcDiff(){
var a=$('.startDateTime').data("DateTimePicker").date();
var b=$('.endDateTime').data("DateTimePicker").date();
    var timeDiff=0
     if (b) {
            timeDiff = (b - a) / 1000;
        }
    $('.days-here').val(Math.floor(timeDiff/(60*60*24)))
    $('.time-here').val(Math.ceil(timeDiff/(60*60)))
   
}