<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container well">
<div class="row">
<div class="col-xs-12 show-focus-status">
<h2 style="text-align:center">Calculate duration between two dates</h2>
<hr/>
<p>This service calculates the duration, counting the day count and the number of days, months and years between two dates. Among other things, it can be used find how many days old you are and the weekday you were born</p>
</div>
</div>
<form>
<div class="row">
<div class="col-sm-6">
<h2>Start Date</h2>
<hr/>
<div class="date-picker" data-date="2014/09/02" data-keyboard="true">
<div class="date-container pull-left">
<h4 class="weekday">Monday</h4>
<h2 class="date">Februray 4th</h2>
<h4 class="year pull-right">2014</h4>
</div>
<span data-toggle="datepicker" data-type="subtract" class="fa fa-angle-left"></span>
<span data-toggle="datepicker" data-type="add" class="fa fa-angle-right"></span>
<div class="input-group input-datepicker">
<input type="text" class="form-control" data-format="DD/MM/YYYY" placeholder="DD/MM/YYYY" name="start">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<span data-toggle="calendar" class="fa fa-calendar"></span>
</div>
</div>
<div class="col-sm-6">
<h2>End Date</h2>
<hr/>
<div class="date-picker" data-date="2014/09/02" data-keyboard="true">
<div class="date-container pull-left">
<h4 class="weekday">Monday</h4>
<h2 class="date">Februray 4th</h2>
<h4 class="year pull-right">2014</h4>
</div>
<span data-toggle="datepicker" data-type="subtract" class="fa fa-angle-left"></span>
<span data-toggle="datepicker" data-type="add" class="fa fa-angle-right"></span>
<div class="input-group input-datepicker">
<input type="text" class="form-control" data-format="DD/MM/YYYY" placeholder="DD/MM/YYYY" name="end">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<span data-toggle="calendar" class="fa fa-calendar"></span>
</div>
</div>
</div>
<hr />
<div class="col-sm-2 pull-right"><input type="submit" value="Calculate Duration" class="btn btn-lg btn-success"></div>
</form>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
body {
padding: 70px 0px;
}
.fa.pull-right {
margin-left: 0.1em;
}
.date-picker,
.date-container {
position: relative;
display: inline-block;
width: 100%;
color: rgb(75, 77, 78);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.date-container {
padding: 0px 40px;
}
.date-picker h2, .date-picker h4 {
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
}
.date-container .date {
text-align: center;
}
.date-picker span.fa {
position: absolute;
font-size: 4em;
font-weight: 100;
padding: 8px 0px 7px;
cursor: pointer;
top: 0px;
}
.date-picker span.fa[data-type="subtract"] {
left: 0px;
}
.date-picker span.fa[data-type="add"] {
right: 0px;
}
.date-picker span[data-toggle="calendar"] {
display: block;
position: absolute;
top: -7px;
right: 45px;
font-size: 1em !important;
cursor: pointer;
}
.date-picker .input-datepicker {
display: none;
position: absolute;
top: 50%;
margin-top: -17px;
width:100%;
}
.date-picker .input-datepicker.show-input {
display: table;
}
@media (min-width: 768px) and (max-width: 1010px) {
.date-picker h2{
font-size: 1.5em;
font-weight: 400;
}
.date-picker h4 {
font-size: 1.1em;
}
.date-picker span.fa {
font-size: 3em;
}
}
$(document).ready(function() {
$(window).on('focus', function(event) {
$('.show-focus-status > .alert-danger').addClass('hidden');
$('.show-focus-status > .alert-success').removeClass('hidden');
}).on('blur', function(event) {
$('.show-focus-status > .alert-success').addClass('hidden');
$('.show-focus-status > .alert-danger').removeClass('hidden');
});
$('.date-picker').each(function () {
var $datepicker = $(this),
cur_date = ($datepicker.data('date') ? moment($datepicker.data('date'), "YYYY/MM/DD") : moment()),
format = {
"weekday" : ($datepicker.find('.weekday').data('format') ? $datepicker.find('.weekday').data('format') : "dddd"),
"date" : ($datepicker.find('.date').data('format') ? $datepicker.find('.date').data('format') : "MMMM Do"),
"year" : ($datepicker.find('.year').data('year') ? $datepicker.find('.weekday').data('format') : "YYYY")
};
function updateDisplay(cur_date) {
$datepicker.find('.date-container > .weekday').text(cur_date.format(format.weekday));
$datepicker.find('.date-container > .date').text(cur_date.format(format.date));
$datepicker.find('.date-container > .year').text(cur_date.format(format.year));
$datepicker.data('date', cur_date.format('YYYY/MM/DD'));
$datepicker.find('.input-datepicker').removeClass('show-input');
}
updateDisplay(cur_date);
$datepicker.on('click', '[data-toggle="calendar"]', function(event) {
event.preventDefault();
$datepicker.find('.input-datepicker').toggleClass('show-input');
});
$datepicker.on('click', '.input-datepicker > .input-group-btn > button', function(event) {
event.preventDefault();
var $input = $(this).closest('.input-datepicker').find('input'),
date_format = ($input.data('format') ? $input.data('format') : "YYYY/MM/DD");
if (moment($input.val(), date_format).isValid()) {
updateDisplay(moment($input.val(), date_format));
}else{
alert('Invalid Date');
}
});
$datepicker.on('click', '[data-toggle="datepicker"]', function(event) {
event.preventDefault();
var cur_date = moment($(this).closest('.date-picker').data('date'), "YYYY/MM/DD"),
date_type = ($datepicker.data('type') ? $datepicker.data('type') : "days"),
type = ($(this).data('type') ? $(this).data('type') : "add"),
amt = ($(this).data('amt') ? $(this).data('amt') : 1);
if (type == "add") {
cur_date = cur_date.add(date_type, amt);
}else if (type == "subtract") {
cur_date = cur_date.subtract(date_type, amt);
}
updateDisplay(cur_date);
});
if ($datepicker.data('keyboard') == true) {
$(window).on('keydown', function(event) {
if (event.which == 37) {
$datepicker.find('span:eq(0)').trigger('click');
}else if (event.which == 39) {
$datepicker.find('span:eq(1)').trigger('click');
}
});
}
});
});
