I'm working on an employee attendance system.

I have an issue with time format. When the current time is for example: 12:03, 11:06 ... the code I use displays only 12:3, 11:6 and I couldn't figure out why it doesn't show the zero.

Here is the code:

HTML code:

<a href="#" data-id="<?= $employee['id'] ?>" class="btn btn-soft-danger btn-sm" id="checkOut"><i class="fa fa-plus-circle  fa-lg"></a>

JQUERY:

$(document.body).on('click', '#checkOut', function(e){
        e.preventDefault()
        var dt = new Date();
        var time = dt.getHours() + ":" + dt.getMinutes();
        $(this).prop("disabled", true);
        $(this).removeClass("btn-soft-danger");
        $(this).addClass("btn-light");
        $(this).html(time)
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 5000,
            timerProgressBar: true,
            didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })                
        Toast.fire({
            icon: 'success',
            title: 'The attendance saved successfully.'
        });
    });