0

I am using Tempus Dominus Bootstrap 4 to create a web based time clock for a project I am working on. As part of the time clock, I am creating a page where users will enter the hours they are available to work. I hit a road block on how to calculate the total hours. I have read the documentation, but have not been able to find a way to calculate the difference between time times.

What I have in one time picker named #sun_start, and on named #sun_end. When the user enters the #sun_end time, I would like to calculate the difference between the two time, and have that displayed in a div area named #sun_hours. I can not find a function that will return the time entered so I can do the calculation. Any help would be greatly appreciated. Thanks, Troy

Erty Seidohl
  • 4,487
  • 3
  • 33
  • 45
Troy Marker
  • 23
  • 7

1 Answers1

0

Just an update. I found a solution to my problem. With continuing research into moment.js and some javascript, I came up with the following solution:

$(function () {
$('#sun_start').datetimepicker({
    format: 'H:mm',
    stepping: 15
});
$('#sun_end').datetimepicker({
    format: 'H:mm',
    stepping:15,
    useCurrent: false
});
$('#sun_start').on('change.datetimepicker', function (e) {
    $('#sun_end').datetimepicker('minDate', e.date);
    var sun1 = $('#sun_start').datetimepicker('viewDate');
    var sun2 = $('#sun_end').datetimepicker('viewDate');
    var sun3 = moment(sun2).diff(sun1);
    var sunH = moment.duration(sun3).as('hours');
    var sunM = Math.round((sunH - Math.floor(sunH)) * 60);
    sun_hours.innerHTML = Math.floor(sunH) + ":" + sunM;        
});
$('#sun_end').on('change.datetimepicker', function (e) { 
    $('#sun_start').datetimepicker('maxDate', e.date);
    var sun1 = $('#sun_start').datetimepicker('viewDate');
    var sun2 = $('#sun_end').datetimepicker('viewDate');
    var sun3 = moment(sun2).diff(sun1);
    var sunH = moment.duration(sun3).as('hours');
    var sunM = Math.round((sunH - Math.floor(sunH)) * 60);
    sun_hours.innerHTML = Math.floor(sunH) + ":" + sunM;
});
});

Not sure if it the most elegant solution, but it works for my purposes. If there is a better way, please let me know. Thanks, Troy

Troy Marker
  • 23
  • 7