JavaScript Timesheet Calculator

JavaScript Timesheet Calculator
Code Snippet:Timesheet calculator
Author: Jamie C
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,107
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript Timesheet Calculator is a handy tool for tracking and calculating work hours. This code utilizes jQuery UI datepicker to allow you to select a specific date. It populates a table with columns for each day of the week, where you can input start and finish times, as well as break duration.

The code calculates the hours worked for each day and updates a total hours worked for the week. This code is helpful for managing and calculating work hours efficiently.

You can use this code on your website to easily track and calculate work hours for various tasks or projects. It simplifies time management by providing a user-friendly interface to input and calculate daily work hours

How to Create a Timesheet Calculator Using JavaScript

1. First of all, load the Bootstrap CSS, jQuery UI CSS, and jQuery timepicker CSS by adding the following CDN links into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.css'>
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css'>

2. Create an HTML structure that includes a date picker input and a table to display your timesheet.

<div class="container text-center">
    <header>
<!--       <h1>NTB</h1> -->
      <h3>Timesheet entry</h3>
    </header>
    <main>
      <form>
        <div class="form-group row">
          <div class="col-2"></div>
        <label class="sr-only" for="name">Name</label>
        <input type="text" class="form-control mb-2 mr-sm-2 col-4" id="name" placeholder="name">

        <label class="sr-only" for="datePicker">Date</label>
        <input type="text" class="form-control mb-2 mr-sm-2 col-4" id="datePicker" placeholder="week commencing">
        <div class="col-2"></div>        
        </div>
      </form>
      <table class="table table-dark table-striped table-hover">
        <thead>
          <tr>
            <th>Day</th>
            <th>Date</th>
            <th>Start Time</th>
            <th>Finish Time</th>
            <th>Break</th>
            <th>Hours Worked</th>
          </tr>
        </thead>
        <tbody id="tBody">
        </tbody>
      </table>
      <div class="row bottom d-none">
        <div class="col">
          <button type="button" id="submit" class="btn btn-success">Submit</button>
        </div>
        <div class="col">
          <h2 id="hoursWorkedText" class="text-right">Total Hours Worked: <span id="totalHours">0</span></h2>
        </div>
      </div>
    </main>
    <footer>
      <h6>Created with <span style="color:red">&#10084;</span> by <a href="http://jncwebdev.co.uk/" target="_blank">JNC</a></h6>
    </footer>
  </div>

3. Use the following CSS code to style the timesheet. You can modify the CSS rules to customize the timesheet interface according to your needs.

html, body {
  height: 100%;
  background-color: #333;
  color: #eee;
}

.time {
  width: 80px;
}

footer {
  margin-top: 20px;
}
footer a {
  text-decoration: none;
  color: #c0c0c0;
}

3. Now, load the jQuery, jQuery UI, Bootstrap JS, and jQuery timepicker plugin JS by including the following CDN links just before closing the body element.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.js'></script>

4. Finally, add the following JavaScript code between the <script> tag (or external js file) after the above CDN links. It handles the date picker and timesheet calculation functionalities.

$(document).ready(function(){

      const weekDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

      $('#datePicker').datepicker({ //initiate JQueryUI datepicker
        showAnim: 'fadeIn',
        dateFormat: "dd/mm/yy",
        firstDay: 1, //first day is Monday
        beforeShowDay: function(date) {
          //only allow Mondays to be selected
          return [date.getDay() == 1,""];
        },
        onSelect: populateDates
      });

      function populateDates() {
        
        $('#tBody').empty(); //clear table
        $('.bottom').removeClass('d-none'); //display total hours worked
        let chosenDate = $('#datePicker').datepicker('getDate'); //get chosen date from datepicker
        let newDate;
        const monStartWeekDays = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
        for(let i = 0; i < weekDays.length; i++) { //iterate through each weekday
          newDate = new Date(chosenDate); //create date object
          newDate.setDate(chosenDate.getDate() + i); //increment set date
          //append results to table
          $('#tBody').append( `
          <tr>
            <td class="day">${weekDays[newDate.getDay()].slice(0,3)}</td>
            <td class="date">${newDate.getDate()} / ${newDate.getMonth() + 1} / ${newDate.getFullYear()}</td>
            <td class="start-time"><input id="startTime${monStartWeekDays[i]}" class="time ui-timepicker-input" type="text" /></td>
            <td class="finish-time"><input id="finishTime${monStartWeekDays[i]}" class="time ui-timepicker-input" type="text" /></td></td>
            <td class="break">
              <select id="break${monStartWeekDays[i]}">
                <option value="0">0</option>
                <option value="0.5">0.5</option>
                <option value="1">1</option>
              </select>
            </td>
            <td class="hours-worked" id="hoursWorked${monStartWeekDays[i]}">
              0
            </td>
          </tr>
          ` );

          //function to calculate hours worked
          let calculateHours = () => {
            let startVal = $(`#startTime${monStartWeekDays[i]}`).val();
            let finishVal = $(`#finishTime${monStartWeekDays[i]}`).val();
            let startTime = new Date( `01/01/2007 ${startVal}` );
            let finishTime = new Date( `01/01/2007 ${finishVal}` );
            let breakTime = $(`#break${monStartWeekDays[i]}`).val();
            let hoursWorked = (finishTime.getTime() - startTime.getTime()) / 1000;
            hoursWorked /= (60 * 60);
            hoursWorked -= breakTime;

            if (startVal && finishVal) { //providing both start and finish times are set
              if (hoursWorked >= 0) { //if normal day shift
                $(`#hoursWorked${monStartWeekDays[i]}`).html(hoursWorked);
              } else { //if night shift
                $(`#hoursWorked${monStartWeekDays[i]}`).html(24 + hoursWorked);
              }
            }

            updateTotal();
          }
          //initiate function whenever an input value is changed
          $(`#startTime${monStartWeekDays[i]}, #finishTime${monStartWeekDays[i]}, #break${monStartWeekDays[i]}`).on('change', calculateHours);

        }
        $('.start-time input').timepicker({ 'timeFormat': 'H:i', 'step': 15, 'scrollDefault': '09:00' });
        $('.finish-time input').timepicker({ 'timeFormat': 'H:i', 'step': 15, 'scrollDefault': '17:00' });

        function updateTotal() { //function to update the total hours worked
          let totalHoursWorked = 0;
          let hrs = document.querySelectorAll('.hours-worked');
          hrs.forEach(function(val) {
            totalHoursWorked += Number(val.innerHTML);
          });
          document.querySelector('#totalHours').innerHTML = totalHoursWorked;
        }
        

      }
      

    });

That’s all! hopefully, you have successfully created a Timesheet Calculator using HTML, CSS, and JavaScript. 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