Tiny Time Duration Calculator Plugin - Worked Hours Grid

A really simple yet useful jQuery plugin which helps calculate the duration of worked hours in a grid and show total worked hours of the week just like in the Excel. Great for creating a online Time Sheet Calculator app.

How to use it:

1. The plugin requires the latest version jQuery library loaded in the document.

<script src="//code.jquery.com/jquery-3.0.0.slim.min.js"></script>

2. Download the load the jQuery Worked Hours Grid plugin's script after jQuery.

<script src="jquery.worked-hours-grid.js"></script>

3. Create a Worked Hours Grid following the html structure like this:

<table class="ts-grid">
  <thead>
  <tr>
    <th style="visibility: hidden;">Days</th>
    <th>Morning</th>
    <th>Afternoon</th>
    <th>Duration</th>
  </tr>
  </thead>
  <tbody>
  <tr class="ts-row">
    <th>Monday</th>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value=""/> to
      <input class="ts-time ts-end" type="time" value=""/></td>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="14:00"/> to
      <input class="ts-time ts-end" type="time" value="17:45"/></td>
    <td class="ts-sum"></td>
  </tr>
  <tr class="ts-row">
    <th>Tuesday</th>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="08:30"/> to
      <input class="ts-time ts-end" type="time" value="12:30"/></td>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="14:00"/> to
      <input class="ts-time ts-end" type="time" value="17:45"/></td>
    <td class="ts-sum"></td>
  </tr>
  <tr class="ts-row">
    <th>Wednesday</th>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="08:30"/> to
      <input class="ts-time ts-end" type="time" value="12:30"/></td>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="14:00"/> to
      <input class="ts-time ts-end" type="time" value="17:45"/></td>
    <td class="ts-sum"></td>
  </tr>
  <tr class="ts-row">
    <th>Thursday</th>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="08:30"/> to
      <input class="ts-time ts-end" type="time" value="12:30"/></td>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="14:00"/> to
      <input class="ts-time ts-end" type="time" value="17:45"/></td>
    <td class="ts-sum"></td>
  </tr>
  <tr class="ts-row">
    <th>Friday</th>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="08:30"/> to
      <input class="ts-time ts-end" type="time" value="12:30"/></td>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="14:00"/> to
      <input class="ts-time ts-end" type="time" value="17:30"/></td>
    <td class="ts-sum"></td>
  </tr>
  <tr class="ts-row">
    <th>Saturday</th>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value="08:30"/> to
      <input class="ts-time ts-end" type="time" value="12:30"/></td>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value=""/> to
      <input class="ts-time ts-end" type="time" value=""/></td>
    <td class="ts-sum"></td>
  </tr>
  <tr class="ts-row">
    <th>Sunday</th>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value=""/> to
      <input class="ts-time ts-end" type="time" value=""/></td>
    <td class="ts-range">
      <input class="ts-time ts-start" type="time" value=""/> to
      <input class="ts-time ts-end" type="time" value=""/></td>
    <td class="ts-sum"></td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <th colspan="3">Total worked hours of the week</th>
    <td class="ts-total"></td>
  </tr>
  </tfoot>
</table>

4. Initialize the plugin and you're done.

$(".ts-grid").workedHoursGrid({
  selectors: {
    row: ".ts-row",
    range: ".ts-range",
    start: ".ts-start",
    end: ".ts-end",
    sum: ".ts-sum",
    total: ".ts-total"
  }
});

5. Apply your custom CSS styles to the Worked Hours Grid.

.ts-time {
  ...
}

...

6. Customize the units.

$(".ts-grid").workedHoursGrid({
  units: {
    hours: "h",
    minutes: "min",
    seconds: "s"
  },
});

---

This awesome jQuery plugin is developed by tantale. For more Advanced Usages, please check the demo page or visit the official website.