JavaScript Calculate Working Days

JavaScript Calculate Working Days
Code Snippet:Work hour calculator
Author: TanelTM
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 574
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X