I am utilizing the vue2-timepicker JavaScript package.
npm install vue2-timepicker --save
Following that, I import the CSS and datetimepicker component file from node_modules into my main.js file
//
- import the CSS file
import 'vue2-timepicker/dist/VueTimepicker.css'
register the Vue.js component for global use in the application in the main.js file.
import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'Vue.component('vue-timepicker', VueTimepicker)
3. incorporate it within my component.
<vue-timepicker></vue-timepicker>
Here is the rendered HTML from 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>
Challenge:
The above tag consistently displays a read-only input tag, and upon clicking the tag to select a time, an error is shown in the console.
[Vue warn]: Error in render: "TypeError: _vm.isDisabled is not a function"
...