-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
149 lines (144 loc) · 8.18 KB
/
index.htm
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simplistic app to perform common date calculations">
<meta name="keywords" content="date span, timespan, date diff, date add, add dates, subtract dates" />
<meta name="author" content="Sreenath H B">
<link rel="shortcut icon" href="images/favicon.png">
<title>Date Span Calculator</title>
<!-- Bootstrap core CSS -->
<link href="styles/bootstrap.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="styles/DateSpan.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="scripts/html5shiv.js"></script>
<script src="scripts/respond.min.js"></script>
<![endif]-->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-11272237-17', 'datespan.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="wrap">
<div class="container">
<h1>Datespan</h1>
<p>A simplistic app to perform common date calculations</p>
<ul class="nav nav-tabs" role="tablist" id="datetabs">
<li role="presentation">
<a href="#datediff" aria-controls="datediff" role="tab" data-toggle="tab">Add days to a date</a>
</li>
<li role="presentation" class="active">
<a href="#datespan" aria-controls="datespan" role="tab" data-toggle="tab">Span between 2 dates</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="datespan">
<header class="page-header">
<h2>Time span between two dates</h2>
</header>
<section class="content-wrapper main-content clear-fix">
<div class="row">
<div class="col-md-4 text-center">Earlier Date:</div>
<div class="col-md-4 text-center">
<input type="date" id="dtFirst" class="form-control input-lg" />
</div>
<div class="col-md-4 text-center">
<button type="button" class="btn btn-link lnkToday form-control input-lg">Today</button>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">Later Date:</div>
<div class="col-md-4 text-center">
<input type="date" id="dtSecond" class="form-control input-lg" />
</div>
<div class="col-md-4 text-center">
<button type="button" class="btn btn-link lnkToday form-control input-lg">Today</button>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<input type="button" class="btn btn-primary btn-lg" value="Calculate" id="btnCalculate1" />
</div>
</div>
<div class="row">
<div class="text-center panel panel-primary hide">
<div class="panel-heading">Time Span in:</div>
<div class="panel-body" id="pnlResult"></div>
</div>
</div>
</section>
</div>
<div role="tabpanel" class="tab-pane fade" id="datediff">
<header class="page-header">
<h2>What date is x days from today?</h2>
</header>
<section class="content-wrapper main-content clear-fix">
<div class="row">
<div class="col-md-4 text-center">Date:</div>
<div class="col-md-4 text-center">
<input class="form-control input-lg" type="date" id="dtMain" />
</div>
<div class="col-md-4 text-center">
<button type="button" class="btn btn-link lnkToday form-control input-lg">Today</button>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<input type="radio" value="add" name="addsub" id="add" checked> Add
<input type="radio" value="sub" name="addsub" id="sub"> Subtract
</div>
<div class="col-md-4 text-center">
<input class="form-control input-lg" type="number" name="n" id="n"/>
</div>
<div class="col-md-4 text-center">
<select class="form-control input-lg" name="f" id="f">
<option value="days">Days</option>
<option value="weeks">Weeks</option>
<option value="months">Months</option>
<option value="years">Years</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<input type="button" class="btn btn-primary btn-lg" value="Calculate" id="btnCalculate2" />
</div>
</div>
<div class="row">
<div class="text-center panel panel-primary hide">
<div class="panel-heading" id="pnlResult2hdr">The date is:</div>
<div class="panel-body" id="pnlResult2"></div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container text-muted text-center">© Copyright
<script>
document.write(new Date().getFullYear())
</script>
<a href="https://sreenath.net">Sreenath H B</a> | Licensed under
<a href='http://opensource.org/licenses/MIT'>The MIT License</a> |
<a href='https://github.com/ubshreenath/datespan'>Source</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="scripts/modernizr-custom.js"></script>
<script src="scripts/moment.min.js"></script>
<script src="scripts/addDatePicker.js"></script>
</body>
</html>