Input masking for dynamic time values

I'm creating an input-field in which users put in the time they've spent to complete a task in minutes and seconds. The thing is i want the input-field to format the time automatically to something the user understands. For instance the format can be:

• 00:00
• 000:00
• 00 min 00 sec
• 000 min 00 sec

The symbol ":" or the string min / sec have to appear automatically when the user fills in the first number OR before filling in the first number. Both are fine. I tried using imaskjs to create a solution for this problem except this gives a new problem.

Let met show you what i've tried with imaskjs and what the problem is with this solution.

imaskjs + javascript used for this solution

var blocksMask = IMask(document.getElementById('duration_picker_field'), {
  mask: 'YY min XX sec',
  lazy: false ,  // make placeholder always visible

  blocks: {
    XX: {
      mask: IMask.MaskedRange,
      from: 0,
      to: max_time
    },
    YY: {
      mask: IMask.MaskedRange,
      from: 0,
      to: 59
    },
  }
});

The user can fill in three digits before it automatically goes to the seconds part of the input. This is fine except for one thing. The user is obligated to fill in three symbols before it can fill in the seconds part. And they must be able to fill in two digits for minutes aswell.

So the question is: how can i create an input-field which gives the user the ability to fill in two or three digits for minutes and two digits for seconds but keep the pre determined formatting? The solution doesn't have to make use of imaskjs. The only restriction is that i don't use jQuery.