Adding time in any format through text field without timepicker in PHP

Question

I need to enter the number of hours worked in a time sheet for a task. This needs to be in HH:MM format only. The hours needs to get summed up for a particular task.

If it increases 24 hrs then it needs to again get updated like total hrs worked on this task =25:45 hrs or 39:50 hrs like that. I first used jQuery timepicker and restricted it to 12 hrs, but don't know how to add and update the time durations, in hours as well as minutes.

I don't want AM / PM, just number of hours and minutes worked. Time interval =10 minutes.

Also the user must be able to add :30 minutes, :35 minutes, :40 minutes of work for a task. If you have seen Zoho portals, then you know how the log hours are added for a task. I want exactly the same way.

Here is what I have used-

<link rel="stylesheet"  href="<?php echo base_url(); ?>assets/css/jquery.timepicker.css" >
<script src="<?php echo base_url(); ?>assets/javascripts/jquery.timepicker.min.js" ></script>


<section class="form-row">
                        <section class="form-row-left">
                            <label class="required" for="time_spent"><?php echo $this->lang->line('time_spent_hh_mm');?></label></section>
                        <section class="form-row-right">
                            <input class="" id="time_spent" name="time_spent" type="text">
<?php echo form_error('time_spent', '<div class="error">', '</div>'); ?>
                        </section>

     
     <script>
    $(document).ready(function () {
        $('#time_spent').timepicker({
            defaultTime: 'value',
            minuteStep: 1,
            disableFocus: true,
            template: 'dropdown',
            controlType: 'select',
            timeFormat: "HH:mm",
            ampm: false
        });
    });

</script>

score 1 · Answer 1 · answered Sep 25 '15 at 08:21

I found it easier to create your own calculation so i create something like this. Please note I add the input for time_input, and time_spent used for displaying the total amount of time.

<link rel="stylesheet"  href="<?php echo base_url('assets/css/jquery.timepicker.css'); ?>" >

<section class="form-row">
<section class="form-row-left">
    <label class="required" for="time_spent">
        <?php echo $this->lang->line('time_spent_hh_mm');?>
    </label>
</section>
<section class="form-row-right">
    <label>Input time</label>
    <input class="" id="time_input" name="time_input" type="text">
    <input type="button" id="add_time" name="add_time" value="Add">
    <label>Total Time</label>
    <input class="" id="time_spent" name="time_spent" type="text" readonly>
    <?php echo form_error('time_spent', '<div class="error">', '</div>'); ?>
</section>

<script src="<?php echo base_url('assets/js/jquery.timepicker.js'); ?>" ></script>
<script>
    $(document).ready(function () {
        $('#time_input').timepicker({
            defaultTime: 'value',
            minuteStep: 1,
            disableFocus: true,
            template: 'dropdown',
            controlType: 'select',
            timeFormat: "H:i",
            ampm: false
        });

        $(document).on('click',"#add_time",function(){
            var time_total = $("#time_spent").val();
            var time_input = $("#time_input").val();
            if(time_total == ""){ time_total = "00:00"; }
            if(time_input == ""){ time_input = "00:00"; }

            temp_total = time_total.split(":");

            total_h = parseInt(temp_total[0]);
            total_m = parseInt(temp_total[1]);
            total_in_m = parseInt((total_h * 60) + total_m);            

            temp_input = time_input.split(":");
            input_h = parseInt(temp_input[0]);
            input_m = parseInt(temp_input[1]);
            input_in_m = parseInt((input_h * 60) + input_m);

            new_time = parseInt(total_in_m + input_in_m);

            if(new_time < 60) {
                new_h = 0;   
                new_m = new_time;
                console.log(new_h +":"+ new_m)
            }else{
                new_h = parseInt(new_time / 60);
                new_m = new_time % 60;
                console.log(new_h +":"+ new_m)
            }

            /*http://stackoverflow.com/questions/2998784/how-to-output-integers-with-leading-zeros-in-javascript*/
            function pad(num, size) {
                var s = num+"";
                while (s.length < size) s = "0" + s;
                return s;
            }

            $("#time_spent").val(pad(new_h,2) +":"+ pad(new_m,2));
        });
    });

</script>

Additionally, you can insert parameter in base_url('path/to/script/')

Adding time in any format through text field without timepicker in PHP

1 Answers1