Code

				
/**  Will Bergen - 2020
 *   A simple time picker component that supports AM/PM
 *   An example template is included at the bottom of the file - some styling
 *    is required to achieve the apperance of a singular input.
 * */

let vueTimePicker = {
    props : {
        value : {
            type : String,
            default : "",
        }
    },
    data() {
        return {
            hours : "",
            minutes: "",
            ampm: "",
        }
    },
    mounted() {
        if (this.value !== "") {
            if (this.value.length === 4) {
                let temp = this.convertStringtoTime(this.value);
                (temp[0].length < 2 ? this.hours = "0" + temp[0] : this.hours = temp[0]);
                (temp[1].length < 2 ? this.minutes = "0" + temp[1] : this.minutes = temp[1]);
                this.ampm = temp[2];
            }
        }
    },
    methods : {
        convertStringtoTime : function(ts) {
            // Assumes valid time string of int parsable nums, 4 chars long
            var AMPM = "";
            let hours = parseInt(ts[0] + ts[1]);
            (hours < 12 ? AMPM = "AM" : AMPM = "PM");
            var h = hours % 12 || 12;
            return Array(h.toString(), ts[2] + ts[3], AMPM);

        },
        convertTimeToString : function(hours, mins, AMPM) {
            /* From https://forums.asp.net/t/2017973.aspx?convert+12+hour+hh+mm+AM+PM+to+24+hour+hh+mm*/
            if (AMPM == "PM" && hours < 12) hours = hours + 12;
            if (AMPM == "AM" && hours == 12) hours = hours - 12;
            var sHours = hours.toString();
            var sMinutes = mins.toString();
            if (hours < 10) sHours = "0" + sHours;
            if (mins < 10) sMinutes = "0" + sMinutes;
            return sHours+sMinutes;
        },
        emitTime : function() {
            let time = this.convertTimeToString(parseInt(this.hours), parseInt(this.minutes), this.ampm)
            this.$emit('input', time);
        },
        selectHours : function(arg) {
            this.hours = arg.target.value;
            this.emitTime();
        },
        selectMinutes : function(arg) {
            this.minutes = arg.target.value;
            this.emitTime();
        },
        selectAmpm : function(arg) {
            this.ampm = arg.target.value;
            this.emitTime();
        }
    },
    computed : {
        hour_opts : function() {
            var ct = 0;
            var hours = Array();
            while (ct < 13) {
                if (ct.toString().length == 1) {
                    const v = "0" + ct.toString();
                    hours.push({val : v, selected : (this.hours == v ? true : false)});
                } else {
                    const v = ct.toString();
                    hours.push({val : v, selected : (this.hours == v ? true : false)});
                }
                ct++;
            }

            return hours;
        },
        minute_opts : function() {
            var ct = 0;
            var mins = Array();
            while (ct < 60) {
                if (ct.toString().length == 1) {
                    const v = "0" + ct.toString();
                    mins.push({val : v, selected : (this.minutes == v ? true : false)});
                } else {
                    const v = ct.toString();
                    mins.push({val : v, selected : (this.minutes == v ? true : false)});
                }
                ct++;
            }

            return mins;
        },
        ampm_opts : function() {
            var opts =  [
                {val : "AM", selected : (this.ampm == "AM" ? true : false)},
                {val : "PM", selected : (this.ampm == "PM" ? true : false)},
            ]

            if (this.ampm == "") {
                opts[1].selected = true;
            }
            return opts;
        }
    },
    template: "#time_picker_template",
}

// Example Template
<script type="text/x-template" id="time_picker_template">
    <div class="time-picker-container">
        <!-- <span class="time-picker-ph">PlaceHolderText</span> -->
        <!-- Hours -->
        <select @change="selectHours" class="time-picker-select time-picker-select-hour">
            <option selected disabled>HH</option>
            <option v-for="h in hour_opts"
                    :value="h.val"
                    :selected="h.selected">{{h.val}}</option>
        </select>
        :
        <!-- Minutes: -->
        <select @change="selectMinutes" class="time-picker-select time-picker-select-min">
            <option selected disabled>MM</option>
            <option v-for="m in minute_opts"
                    :value="m.val"
                    :selected="m.selected">{{m.val}}</option>
        </select>

        <!-- AM/PM -->
        <select @change="selectAmpm" class="time-picker-select time-picker-select-ampm">
            <option selected disabled>AM/PM</option>
            <option v-for="i in ampm_opts"
                    :value="i.val"
                    :selected="i.selected">{{i.val}}</option>
        </select>
    </div>
</script>