Difference Between two Dates using JQuery or Javascript?



Here code use difference between two dates.



<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script></script>
<link rel="stylesheet" type="text/css" href="style.css">

 <script>
$(document).ready(function(){
    var $datepicker1 =  $( "#datepicker1" );
    var $datepicker2 =  $( "#datepicker2" );
    $datepicker1.datepicker();
    $datepicker2.datepicker({
         onClose: function() {
            var fromDate = $datepicker1.datepicker('getDate');
            var toDate = $datepicker2.datepicker('getDate');
         
            var diff = new Date(toDate - fromDate);
         
            var days = diff/1000/60/60/24;

            alert(days);
        }
    });
});
</script>
</head>
<body>
    <h2>Difference between the dates</h2>
<p>From Date: <input type="text" id="datepicker1"></p>
<p>To Date: <input type="text" id="datepicker2"></p>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Php Form validation with Error messages with Checking fields.

Here i coded form validation using only php with display error messages and checking input fields correctly entered or not Registration Form Name is Required Email Required Password Required Contact Details Required Gender:      Male       Female Gender is required Address required Please find the below code clearly with bootstrap and css also included. Add bootstrap folder into your project. <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="\bootstrap\css\bootstrap.css"> <link rel="stylesheet" type="text/css" href="\bootstrap\css\bootstrap.min.css"> <script src ="..\bootstrap\js\bootstrap.js"></script> <script src ="..\bootstrap\js\bootstrap.min.js"></script> <title>Form Validation</title> <st...
Read more

Simple calculator using JQuery and HTML..

<html> <head> <title>Two textbox, when enter data in one textbox, it appears in second textbox</title> <link rel="stylesheet" type="text/css" href="style.css"> /<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Addition $("#add").click(function(){ var a = $("#cal1").val();   var b = $("#cal2").val(); $("#result").val(+a + +b); }); //Subtraction $("#sub").click(function(){ var a = $("#cal1").val();    var b = $("#cal2").val(); $("#result").val(+a - +b); }); //Multiplication $("#mul").click(function(){ var a = $("#cal1").val();   v...
Read more

how to customize dashboard in active admin gem in rails 4

Installation Active Admin is a Ruby Gem. gem 'activeadmin' More accurately, it's a  Rails Engine  that can be injected into your existing Ruby on Rails application. Setting up Active Admin After installing the gem, you need to run the generator. By default we use Devise, and the generator creates an AdminUser  model. If you want to create a different model (or modify an existing one for use with Devise) you can pass it as an argument. If you want to skip Devise configuration entirely, you can pass  --skip-users . rails g active_admin:install # creates the AdminUser class rails g active_admin:install User # creates / edits the class for use with Devise rails g active_admin:install --skip-users # skips Devise install The generator adds these core files, among others: app/admin/dashboard.rb app/assets/javascripts/active_admin.js.coffee app/assets/stylesheets/active_admin.css.scss config/initializers/active_admin.rb Now, ...
Read more