3

我需要在时间表中输入任务的工作小时数。这仅需要采用 HH:MM 格式。需要总结特定任务的时间。

如果它增加了 24 小时，那么它需要再次更新，就像在这个任务上工作的总小时数 = 25:45 小时或 39:50 小时一样。我第一次使用 jQuery timepicker 并将其限制为 12 小时，但不知道如何添加和更新持续时间，以小时和分钟为单位。

我不想要上午/下午，只需要工作的小时数和分钟数。时间间隔=10分钟。

此外，用户必须能够为任务添加 :30 分钟、:35 分钟、:40 分钟的工作时间。如果您看过 Zoho 门户，那么您就会知道如何为任务添加日志小时数。我想要完全相同的方式。

这是我用过的-

<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>

4

1 回答 1

1

我发现创建自己的计算更容易，所以我创建了这样的东西。请注意，我为 time_input 添加了输入，而 time_spent 用于显示总时间。

<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>

此外，您可以在base_url('path/to/script/')

于 2015-09-25T08:21:27.190 回答