vue2-timepicker package is not working properly in vue.js

Question

I am using the vue2-timepicker js package,

npm install vue2-timepicker --save

after that,I import CSS and datetimepicker component file from node_modules inside my main.js file

//

1. import CSS file

import 'vue2-timepicker/dist/VueTimepicker.css'

2. register Vue js component for globally use in the application in main.js file.

   import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'

   Vue.component('vue-timepicker', VueTimepicker)

3.use inside my component.

<vue-timepicker></vue-timepicker>

here is the render HTML inside the inspect element tab

<span class="vue__time-picker time-picker">
   <input type="text" placeholder="HH:mm" tabindex="0" readonly="readonly" autocomplete="off class="display-time is-empty">
   <div tabindex="-1" class="dropdown drop-down" style="display: none;">
      <div tabindex="-1" class="select-list">
         <ul class="hours">
            <li class="hint">HH</li>
         </ul>
         
         <ul class="minutes">
            <li class="hint">mm</li>
         </ul>
        
      </div>
   </div>
</span>

Problem:
above tag always show a read-only input tag whenever I click on the tag for a select time it shows an error in the console.

[Vue warn]: Error in render: "TypeError: _vm.isDisabled is not a function"

found in

---> <VueTimepicker> at node_modules/vue2-timepicker/src/vue-timepicker.vue
       <Home> at src/views/tenants/pages/Home.vue
         <Main> at src/layouts/main/Main.vue
           <App> at src/App.vue
             <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3550
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
setDropdownState @ vue-timepicker.vue?5427:1174
toggleActive @ vue-timepicker.vue?5427:1139
onBlur @ vue-timepicker.vue?5427:1289
eval @ vue-timepicker.vue?5427:1283
setTimeout (async)
debounceBlur @ vue-timepicker.vue?5427:1281
blur @ vue-timepicker.vue?0d53:38
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 TypeError: _vm.isDisabled is not a function
    at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:189:59)
    at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
    at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:180:37)
    at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:163:25)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.run (vue.runtime.esm.js?2b0e:4554)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)

Answer 1

This vue2-timepicker package works fine. You import the package in the wrong way. You need to import it in the following manner.

import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";

Vue.component("vue-timepicker", VueTimepicker);

CodeSandbox