ShowEasyFrontEnd/FrontEnd/components/newComponent/form/ElementTimePicker.vue

<template>
  <client-only>
    <div>
      <div class="element tw-flex tw-items-center">
        <vue-timepicker format="HH" placeholder="--" input-width="90px" fixed-dropdown-button @input="inputHandler1"></vue-timepicker>
        <div class="tw-mx-[16px]">:</div>
        <vue-timepicker format="mm" placeholder="--" input-width="90px" fixed-dropdown-button @input="inputHandler2"></vue-timepicker>
      </div>
    </div>
  </client-only>
</template>
<script>
export default {
  name: "elementTimePicker",
  data() {
    return{
      hour: '',
      branch: '',
      dateTime: '',
    }
  },
  methods: {
    inputHandler1(eventData) {
      this.hour = eventData.HH;
      if(this.hour!="" && this.branch!=""){
        this.$emit("change", this.hour+":"+this.branch);
      }
    },
    inputHandler2(eventData) {
      this.branch = eventData.mm;
      if(this.hour!="" && this.branch!=""){
        this.$emit("change", this.hour+":"+this.branch);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
:deep() {
  .element {

    .vue__time-picker-dropdown ul li:not([disabled]).active,
    .vue__time-picker-dropdown ul li:not([disabled]).active:focus,
    .vue__time-picker-dropdown ul li:not([disabled]).active:hover,
    .vue__time-picker .dropdown ul li:not([disabled]).active,
    .vue__time-picker .dropdown ul li:not([disabled]).active:focus,
    .vue__time-picker .dropdown ul li:not([disabled]).active:hover {
      background: #f48800;
      color: #fff;
    }
  }
  .vue__time-picker input.display-time{
      padding: 20px !important;
    }
}
</style>