mariana
Pun Pundit
LEVEL 1
100 XP
When you are struggling to calculate your age by your date of birth, now here's a solution to your problem. In this tutorial, I will teach you how to Calculate Years Between Two Dates in jQuery. This is a simple yet powerful method of calculating date interval by years. Simply follow the step by step guide below.
Let's get started:
Step 1. Create a landing page and name it "index.php".
Step 2. Create a layout of your design.
Step 3. Create a page design.
Step 4. Create a script for calculating years between two dates.
For all students who need a programmer for your thesis system or anyone who needs a source code in any programming languages. You can contact me @ :
Email – [email protected]
Mobile No. – 09305235027 – tnt
Let's get started:
Step 1. Create a landing page and name it "index.php".
Step 2. Create a layout of your 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: 40%;
- padding: 12px;
- }
- .container .row{
- padding-bottom: 2px;
- padding-left: 2px;
- }
- .container #result {
- display: none;
- background: #16eedc;
- color: #fff;
- padding: 1px 0 0 1px;
- font-size: 21px;
- border: 1px solid transparent;
- border-radius: 5px;
- -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.099);
- box-shadow: 0 3px 3px rgba(0, 0, 0, 0.099);
- }
- </
style
>
Step 3. Create a page design.
- <div
class
=
"container"
>
- <div
class
=
"page-header"
><h1
>
Age</
h1
></
div
>
- <div
class
=
"box col-md-12"
>
- <div
class
=
"row"
>
- <div
class
=
'col-sm-12'
>
- <div
class
=
"form-group"
>
- <label
class
=
"col-md-4"
>
BirthDate:</
label
>
- <div
class
=
'input-group date col-md-8'
id
=
'birthdate'
>
- <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-12'
>
- <div
class
=
"form-group"
>
- <label
class
=
"col-md-4"
>
PresentDate:</
label
>
- <div
class
=
'input-group date col-md-8'
id
=
'presentdate'
>
- <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-12'
>
- <div
class
=
'col-sm-8 pull-right'
>
- <div
class
=
"form-group"
>
- <input
type
=
'submit'
id
=
"calc"
value
=
"calculate"
class
=
"btn btn-info "
/
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"row"
>
- <div
class
=
'col-sm-12'
>
- <div
id
=
"result"
class
=
"form-group"
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
Step 4. Create a script for calculating years between two dates.
- <!-- 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"
>
- $(
document)
.ready
(
function
(
)
{
- /*get the date interval*/
- var
age =
{
- /*for years*/
- years:
function
(
d1,
d2)
{
- return
d2.getFullYear
(
)
-
d1.getFullYear
(
)
;
- }
- }
- /* set the click event handler of a button */
- $(
"#calc"
)
.click
(
function
(
)
{
- /* Statement */
- $(
"#result"
)
.hide
(
)
;
- $(
"#result"
)
.fadeIn
(
900
,
0
)
;
- $(
"#result"
)
.html
(
function
(
)
{
- /*get the given date in the textbox*/
- var
birthdate =
document.getElementById
(
"d1"
)
.value
;
- var
presentdate =
document.getElementById
(
"d2"
)
.value
;
- /*set a variable for displaying the result*/
- var
result ;
- /*set a new date*/
- var
d1 =
new
Date
(
birthdate)
;
- var
d2 =
new
Date
(
presentdate)
;
- /*validating the result*/
- if
(
presentdate==
''
||
birthdate==
''
)
{
- result =
'Please enter the dates!'
;
- }
else
{
- result =
'Result '
+
- '<hr/> Your age is :'
+
age.years
(
d1,
d2)
+
- ' years old '
+
- '<hr/>'
;
- }
- /*display the validated result*/
- return
result;
- }
)
;
- }
)
- }
)
- $(
function
(
)
{
- $(
'#birthdate'
)
.datetimepicker
(
{
- // format: 'MM, dd, yyyy',
- format:
'mm/dd/yyyy'
,
- todayBtn:
1
,
- autoclose:
1
,
- todayHighlight:
1
,
- startView:
2
,
- minView:
2
,
- }
)
;
- }
)
;
- $(
function
(
)
{
- $(
'#presentdate'
)
.datetimepicker
(
{
- // format: 'MM, dd, yyyy',
- format:
'mm/dd/yyyy'
,
- todayBtn:
1
,
- autoclose:
1
,
- todayHighlight:
1
,
- startView:
2
,
- minView:
2
,
- }
)
;
- }
)
;
- </
script>
For all students who need a programmer for your thesis system or anyone who needs a source code in any programming languages. You can contact me @ :
Email – [email protected]
Mobile No. – 09305235027 – tnt
