I’m struggling here to find the number of year’s between from date and to date in date-pickers actually I’m trying to print the numbers of years between selected by from date and to date. I have tried in one way but I’m not getting correct values, anybody can you please help me on it how to achieve it.
For example: this is the dates like 02-05-2023 – 01-04-2027 (4 years) I want showcase the number of years contract between the sleeted dates 02-05-2023 – 01-04-2027 Answer (4 years)
Request: if possible please show me example in js fiddle
<html>
<head>
<!-- font-awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- datepicker styles -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">
</head>
<body>
<div class="container">
<form>
<!-- Date Picker -->
<div class="form-group mb-4">
<div class="datepicker date input-group">
<input type="text" placeholder="Choose Date" class="form-control" id="fecha1">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<!-- // Date Picker -->
<!-- Date Picker -->
<div class="form-group mb-4">
<div class="datepicker date input-group">
<input onchange="myTest()" type="text" placeholder="Choose Date" class="form-control" id="fecha2">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<!-- // Date Picker -->
<p id="test"></p>
</form>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- Datepicker -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(function () {
$('.datepicker').datepicker({
language: "es",
autoclose: true,
format: "dd/mm/yyyy"
});
});
</script>
<script>
function myTest() {
var fdate = document.getElementById("fecha1").value;
var tdate = document.getElementById("fecha2").value;
var date1 = new Date(fdate);
var date2 = new Date(tdate);
var date1_ms = date1.getFullYear();
var date2_ms = date2.getFullYear();
var years = parseInt(tdate) - parseInt(fdate);
var adminLim = document.querySelector('#test')
adminLim.append(years)
}
</script>
</body>
<html>
2
Answers
I afraid you passed the wrong argument to parInt(). My suggestion is that you should change
var years = parseInt(tdate) - parseInt(fdate);tovar years = Math.abs(parseInt(date1_ms) - parseInt(date2_ms));, and you would get the correct year gap.You can simply do it using :
Since
getFullYear()is returning anintegerrepresenting the year for the given date according to local time. Returns NaN if the date is invalid.Also use
.html()instead of.append(), since.html()will replace everything but.append()will just append at the end.