In the current implementation, the Element Timepicker triggers the input event every time the hours, minutes, or seconds are changed. However, it does not trigger the change event as mentioned in the official documentation. For my specific use case, I require the user to select a value without immediately updating the model (utilizing v-model) until they press the ok button.
I am considering creating a wrapper component that internally manages the state to achieve this functionality. (See sample implementation below)
Is there a cleaner way to accomplish this requirement within the native capabilities of Element, rather than resorting to workarounds like the one proposed?
UPDATE: Upon further testing, it appears that the change event is indeed triggered when the ok button is clicked. However, crucially, it also fires when the user clicks out of the time picker after focusing on it, which is undesired behavior. The model should only update when the ok button is explicitly clicked.
<template>
<el-time-picker
v-bind="_passthrough"
:value="_displayValue"
@blur="handleBlur"
@focus="handleFocus"
@input="handleInput"
>
</el-time-picker>
</template>
<script>
// JavaScript logic here
</script>