-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (109 loc) · 4.15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>Ageteller - it calculates your age, accurately!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="well">
<div class="page-header">
<h1>Ageteller<sup> <b>BETA</b></sup> <small>an app that calculates your age on a given date, <b>accurately</b></small></h1>
</div>
<p>Step 1: Select your birth date</p>
<div class="input-append" id="datetimepicker1">
<div class="col-xs-1">
<input id="datetimepicker1" class="form-control" data-format="yyyy-MM-dd" type="text">
</div>
<span class="add-on">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<br>
<br>
<p>Step 2: Select a random date to check your age</p>
<div class="input-append" id="datetimepicker2">
<div class="col-xs-1">
<input id="datetimepicker2" class="form-control" data-format="yyyy-MM-dd" type="text">
</div>
<span class="add-on">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<br>
<br>
<p><b>Result</b></p>
<p class="result"></p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$('#datetimepicker1').datetimepicker({
format: 'dd/MM/yyyy',
language: 'en'
});
$('#datetimepicker2').datetimepicker({
format: 'dd/MM/yyyy',
language: 'en'
});
//var date2 = $('#datetimepicker2').data('datetimepicker');
//$('.result').append(date2);
$('#datetimepicker2').datetimepicker()
.on('changeDate', function(ev){
var date1 = $('#datetimepicker1').data('datetimepicker');
if(date1.getDate()!==null)
{
var birth = new Date(date1.getDate().toString());
var date2 = $('#datetimepicker2').data('datetimepicker');
var d2 = new Date(date2.getDate().toString());
var timeDiff = Math.abs(d2.getTime() - birth.getTime());
//var diff_days = Math.ceil(timeDiff / (1000 * 3600 * 24));
var diff_years = d2.getFullYear()-birth.getFullYear();
var diff_months = d2.getMonth()-birth.getMonth();
var diff_days = d2.getDate()-birth.getDate();
if(diff_days<0)
{
var d = new Date(d2.getFullYear(), d2.getMonth()-2, 0);
diff_months -= 1;
diff_days += d.getDate();
}
if(diff_months<0)
{
diff_years -= 1;
diff_months += 12;
}
if(diff_years<0)
{
$('.result').html('');
$('.result').append("Please select a date that falls after your birth date!");
}
else
{
$('.result').html('');
$('.result').append(diff_years+" years, "+diff_months+" months, and "+diff_days+" days");
}
}
else
{
$('.result').html('');
$('.result').append("Please select a birth date first!");
}
});
</script>
</body>
</html>