How to make plain input for hours:minutes?

I'm struggling to create a very plain user input field that allows the user to only enter hours:minutes in this format: "00:00". The idea is to be only text input, no date pickers, calendars, clocks, AM/PM, etc.

I dont know if i should be looking at regex, since i want the user input to be in the format specified above, and be validated on input.

I've tried using input type="time" but it behaves differently across platforms and browsers (adds AM/PM in Firefox, displays a clock picker on Android, etc.) i've tried something like

<v-text-field oninput="this.value = this.value.replace(/[^0-9]/g, '').replace([0-1]{1}[0-9]{1}|20|21|22|23):[0-5]{1}[0-9]{1});"></v-text-field>, but i couldn't get it to work. Any ideas? Thanks in advance!

Solution

You need to use mask to format input text field value right.
For Vue.js there is simple yet powerful mask component - https://vuejs-tips.github.io/vue-the-mask/

So, you should:

Install component with
npm i -S vue-the-mask
Import it i.e. locally inside the component

import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}

Use it with appropriate mask

<the-mask :mask="['##:##']" />

Codesandbox link with ##:## example - https://codesandbox.io/s/pedantic-dijkstra-np411