period summary string

by larsolesimonsen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<div id="parent">
    <input id="startdate-pick" value="10/12/2011"/>
    <select id="timePickerFrom"><option selected="selected">09:15</option></select>
    <input id="enddate-pick" value="10/13/2011"/>
    <select id="timePickerTo"><option selected="selected">10:30</option></select>
    <div id="period-summary"/>
</div>

JavaScript

$('#startdate-pick,#enddate-pick').datepicker();
$('input, select').change(function() { updatePeriodSummary($('#parent'));});
updatePeriodSummary($('#parent'));

function getFullDate($dateInput, $timeInput) {
    var date = $dateInput.datepicker('getDate');
    date.setHours($timeInput.val().substring(0, 2), $timeInput.val().substring(3, 5));
    return date;
}

function buildPeriodSummaryString(days, hours, minutes) {
    var dayPart = Number(days) <= 0 ? "" : days + (Number(days) == 1 ? " dag" : " dage") + " ";
    var hourPart = Number(hours) <= 0 ? "" : hours + (Number(hours) == 1 ? " time" : " timer") + " ";
    var minutePart = Number(minutes) <= 0 ? "" : minutes + (Number(minutes) == 1 ? " minut" : " minutter") + " ";
    return dayPart + hourPart + minutePart;
}

function updatePeriodSummary($parentTag) {
    var fromDate = getFullDate($parentTag.find('#startdate-pick'), $parentTag.find('#timePickerFrom'));
    var toDate = getFullDate($parentTag.find('#enddate-pick'), $parentTag.find('#timePickerTo'));
    var minuteMillis = 1000 * 60; //Number of milliseconds in a minute
    var hourMillis = minuteMillis * 60; //Number of milliseconds in an hour
    var dayMillis = hourMillis * 24; //Number of milliseconds in a day
    var differenceMillis = toDate.getTime() - fromDate.getTime(); //Number of milliseconds between start and end date
    var differenceDays = Math.floor(differenceMillis / dayMillis);
    var differenceHours = Math.floor((differenceMillis - (differenceDays * dayMillis)) / hourMillis);
    var differenceMinutes = Math.floor((differenceMillis - (differenceDays * dayMillis) - (differenceHours * hourMillis)) / minuteMillis);

    var summaryString = buildPeriodSummaryString(differenceDays, differenceHours, differenceMinutes);
    $parentTag.find('#period-summary').text(summaryString);
}