Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <!-- jQuery and jQueryUI References -->
  <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
  <script type='text/javascript'>
    $(function(){
        // Wire up Date and DateTime pickers (with default values)
        $("#start").datetimepicker({ day: 14, month: 7, year: 2014, hour: 8}).val("7/14/2014 08:00");
        $("#end").datetimepicker({ day: 18, month: 7, year: 2014, hour: 17}).val("7/18/2014 17:00");
        $("#workday_start").timepicker({ hour : 8 }).val("8:00");
        $("#workday_end").timepicker({ hour : 17 }).val("17:00");
      
        // Calculate the number of hours worked
        $("#calculate").click(function(){
            // Are all fields complete?
            var allFieldsComplete = $('.data input').filter(function(){ return $(this).val().toString().length == 0; }).length == 0;
            // Ensure all fields are present
            if(allFieldsComplete)
            {
                // Output the number of hours worked
                var start = new Date($("#start").val());
                var end = new Date($("#end").val());
                var working_start = new Date("1/1/0001 " + $("#workday_start").val()).getHours() + (new Date("1/1/0001 " + $("#workday_start").val()).getMinutes() / 60) 
                var working_end = new Date("1/1/0001 " + $("#workday_end").val()).getHours() + (new Date("1/1/0001 " + $("#workday_end").val()).getMinutes() / 60) ;
                var includeWeekends = $("#includeWeekends").is(":checked"); 
              
                // Output the number of hours worked
                alert(workingHoursBetweenDates(start,end,working_start,working_end,includeWeekends));
            }
            else
            {  
                // One or more of the fields is undefined or empty
                alert("Please ensure all fields are completed.");
            }
        });
    });
    
    // Simple function that accepts two parameters and calculates the number of hours worked within that range
function workingHoursBetweenDates(startDate, endDate, dayStart, dayEnd, includeWeekends) {
    // Store minutes worked
    var minutesWorked = 0;
  
    // Validate input
    if (endDate <= startDate) { return 0; }
    
    // Loop from your Start to End dates (by hour)
    var current = startDate;
    // Define work range
    var workHoursStart = dayStart;
    var workHoursEnd = dayEnd;
    // Loop while currentDate is less than end Date (by minutes)
    while(current <= endDate){                   
        // Is the current time within a work day (and if it occurs on a weekend or not)             
        var currentTime = current.getHours() + (current.getMinutes() / 60);
        if(currentTime >= workHoursStart && currentTime < workHoursEnd && (includeWeekends ? current.getDay() !== 0 && current.getDay() !== 6 : true)){
              // Increment the number of minutes worked
              minutesWorked++;
        }
         
        // Increment current time
        current.setTime(current.getTime() + 1000 * 60);
    }
    // Return the number of hours
    return Math.round(minutesWorked / 60 * 100) / 100;
}
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <pre>Variables</pre>
  <table>
    <tr>
      <th>START</th>
      <th>END</th>
      <th>WORKDAY START</th>
      <th>WORKDAY END</th>
      <th>INCLUDE WEEKENDS?</th>
    </tr>
    <tr class='data'>
      <th><input id='start' /></th>
      <th><input id='end' /></th>
      <th><input id='workday_start' /></th>
      <th><input id='workday_end' /></th>
      <th><input id='include_weekends' type='checkbox' /></th>
    </tr>
  </table>
  <hr />
  <input id='calculate' type='button' value='Calculate Hours Worked' />
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rionmonsterpro
0viewers