diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index c20006120..c1feb7425 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -63,12 +63,12 @@
                 <div class="p-timepicker" v-if="showTime||timeOnly">
                     <div class="p-hour-picker">
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 0, 1)" @mouseup="onTimePickerElementMouseUp($event)"
-                            @mouseout="onTimePickerElementMouseUp($event)">
+                            @mouseleave="onTimePickerElementMouseLeave()">
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span :style="{'display': currentHour < 10 ? 'inline': 'none'}">0</span><span>{{currentHour}}</span>
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 0, -1)" @mouseup="onTimePickerElementMouseUp($event)"
-                            @mouseout="onTimePickerElementMouseUp($event)">
+                            @mouseleave="onTimePickerElementMouseLeave()">
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -83,12 +83,12 @@
                     </div>
                     <div class="p-minute-picker">
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 1, 1)" @mouseup="onTimePickerElementMouseUp($event)"
-                            @mouseout="onTimePickerElementMouseUp($event)">
+                            @mouseleave="onTimePickerElementMouseLeave()">
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span :style="{'display': currentMinute < 10 ? 'inline': 'none'}">0</span><span>{{currentMinute}}</span>
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 1, -1)" @mouseup="onTimePickerElementMouseUp($event)"
-                            @mouseout="onTimePickerElementMouseUp($event)">
+                            @mouseleave="onTimePickerElementMouseLeave()">
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -103,12 +103,12 @@
                     </div>
                     <div class="p-second-picker" v-if="showSeconds">
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 2, 1)" @mouseup="onTimePickerElementMouseUp($event)"
-                            @mouseout="onTimePickerElementMouseUp($event)">
+                            @mouseleave="onTimePickerElementMouseLeave()">
                             <span class="pi pi-chevron-up"></span>
                         </button>
                         <span :style="{'display': currentSecond < 10 ? 'inline': 'none'}">0</span><span>{{currentSecond}}</span>
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 2, -1)" @mouseup="onTimePickerElementMouseUp($event)"
-                            @mouseout="onTimePickerElementMouseUp($event)">
+                            @mouseleave="onTimePickerElementMouseLeave()">
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
@@ -975,6 +975,9 @@ export default {
                 event.preventDefault();
             }
         },
+        onTimePickerElementMouseLeave() {
+            this.clearTimePickerTimer();
+        },
         repeat(event, interval, type, direction) {
             let i = interval||500;