JavaScript Calculate Working Days

This JavaScript code enables you to easily calculate working hours across multiple days. It uses moment.js for time manipulation and jQuery for event handling. By inputting start and end times, along with break durations, it calculates the total hours worked each day and provides a subtotal for the entire week.

This code is valuable for creating a user-friendly work hours calculator on websites. You can implement this calculator on time or task management projects to allow users to easily track and visualize their weekly work hours.

How to Calculate Working Days in JavaScript

1. First of all, include the necessary jQuery and moment.js libraries in your project by adding the following CDN links to the head tag of your webpage.

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js'></script>

2. Create an HTML structure with a table containing input fields for each day, specifying start and end times, and break duration.

<pre class='title'>▪──[Work]┐
         └[hour]┐
 ┌──[calculator]┘
 └───────────────────────────▪</pre>
<table>
  <thead>
    <tr>
      <th>Day</th>
      <th class='input-column'>Starting time</th>
      <th class='input-column'>Ending time</th>
      <th class='input-column'>Break deduction</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class='day day-1'>
      <td>
        Monday
      </td>
      <td>
        <input class='start' value='9:00'>
      </td>
      <td>
        <input class='end' value='17:30'>
      </td>
      <td>
        <input class='break' value='30'>
      </td>
      <td class='total'>8:00</td>
    </tr>
    <tr class='day day-2'>
      <td>
        Tuesday
      </td>
      <td>
        <input class='start' value='9:00'>
      </td>
      <td>
        <input class='end' value='17:30'>
      </td>
      <td>
        <input class='break' value='30'>
      </td>
      <td class='total'>8:00</td>
    </tr>
    <tr class='day day-3'>
      <td>
        Wednesday
      </td>
      <td>
        <input class='start' value='9:00'>
      </td>
      <td>
        <input class='end' value='17:30'>
      </td>
      <td>
        <input class='break' value='30'>
      </td>
      <td class='total'>8:00</td>
    </tr>
    <tr class='day day-4'>
      <td>
        Thursday
      </td>
      <td>
        <input class='start' value='9:00'>
      </td>
      <td>
        <input class='end' value='17:30'>
      </td>
      <td>
        <input class='break' value='30'>
      </td>
      <td class='total'>8:00</td>
    </tr>
    <tr class='day day-5'>
      <td>
        Friday
      </td>
      <td>
        <input class='start' value='9:00'>
      </td>
      <td>
        <input class='end' value='17:30'>
      </td>
      <td>
        <input class='break' value='30'>
      </td>
      <td class='total'>8:00</td>
    </tr>
    <tr class='day day-6'>
      <td>
        Saturday
      </td>
      <td>
        <input class='start' value='0:00'>
      </td>
      <td>
        <input class='end' value='0:00'>
      </td>
      <td>
        <input class='break' value='0'>
      </td>
      <td class='total'>0:00</td>
    </tr>
    <tr class='day day-7'>
      <td>
        Sunday
      </td>
      <td>
        <input class='start' value='0:00'>
      </td>
      <td>
        <input class='end' value='0:00'>
      </td>
      <td>
        <input class='break' value='0'>
      </td>
      <td class='total'>0:00</td>
    </tr>
    <tfoot>
      <tr>
        <td colspan='4'>Subtotal</td>
        <td class='subtotal'>40:00</td>
      </tr>
    </tfoot>
  </tbody>
</table>

3. Add the following CSS to enhance the visual appeal of your calculator. Customize styles according to your project’s theme for a seamless integration.

body {
  color: #9F0;
  background: #272822;
  font-family: monospace;
  font-size: 12px;
}

table {
  width: 500px;
  margin: 0px auto;
  padding: 4px;
  border: 5px double #0D0;
  background-color: #003;
}

tfoot tr td {
  border-top: 1px solid #0D0;
}

tfoot {
  font-weight: bold;
}

th {
  color: #003;
  background-color: #0D0;
  border-bottom: 1px solid #0D0;
  padding-bottom: 5px;
}
th.input-column {
  width: 100px;
}

tr.day > td {
  font-size: 14px;
}

input {
  font-family: monospace;
  font-size: 16px;
  text-align: right;
  width: 100px;
  background-color: #003;
  color: #0F0;
  padding: 2px;
  border: 1px dotted #0D0;
}

input[type="button"] {
  text-align: center;
}

.total, .subtotal {
  font-size: 16px;
  text-align: right;
  padding-right: 5px;
  color: cyan;
}

.title {
  color: #EF5939;
  width: 500px;
  margin: 0px auto 20px;
  font-size: 30px;
}

4. Finally, integrate the JavaScript code to enable real-time calculations. The script uses jQuery to capture user input, moment.js for time manipulation, and dynamically updates total and subtotal values.

$("input").bind("keyup", function() {
  var subtotal = 0;
  for (var i = 1; i <= 7; i++) {
    var $day      = $(".day-"+i);
    var start     = moment($day.find(".start").val(), "HH:mm");
    var end       = moment($day.find(".end").val(), "HH:mm");
    var deduction = moment.duration(parseInt($day.find(".break").val(), 10), "minutes");
    var $total    = $day.find(".total");

    var result = end.subtract(deduction).diff(start, 'milliseconds');
    var d = moment.duration(result, 'milliseconds');
    var hours = Math.floor(d.asHours());
    var mins = Math.floor(d.asMinutes()) - hours * 60;
    if (result < 0) {
      $total.text(d.asMinutes()+" min");
    } else {
      $total.text(hours +":"+ ((mins < 10)?"0"+mins:mins));
    }
    subtotal += result;
  }
  var d = moment.duration(subtotal, 'milliseconds');
  var hours = Math.floor(d.asHours());
  var mins = Math.floor(d.asMinutes()) - hours * 60;
  $(".subtotal").text(hours +":"+ ((mins < 10)?"0"+mins:mins));
});

That’s all! hopefully, you have successfully created a working hours calculator to calculate working days. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.