Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how the best packages to add a date and time picker, and a virtual scroll list.
Vue Datetime Picker
Vue Datetime Picker lets us add a date and time picker to our Vue app.
To install it, we run:
npm i vue-vanilla-datetime-picker
Now we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import DateTimePicker from "vue-vanilla-datetime-picker";
Vue.component("date-time-picker", DateTimePicker);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<date-time-picker v-model="datetime"></date-time-picker>
</div>
</template>
<script>
export default {
data() {
return {
datetime: {}
};
}
};
</script>
<style lang='scss'>
@import "../../../node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker";
</style>
We register the component in main.js .
Then we import the styles from the package in the component.
Also, we use the date-time-picker to let users pick the date.
v-model lets us save the selection to the datetime state.
It has many slots to let us customize any section of the date-time picker.
vue2-datepicker
vue2-datepicker is another date picker package that we can use to add one.
To use it, first we install it by running:
npm i vue2-datepicker
Then we use it by writing:
<template>
<div>
<date-picker v-model="time" valuetype="format"></date-picker>
</div>
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
components: { DatePicker },
data() {
return {
time: null
};
}
};
</script>
We add the date-picker to bind it to v-model to use it.
It can also let us select the time with the date.
We can write:
<template>
<div>
<date-picker v-model="time" type="datetime"></date-picker>
</div>
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
components: { DatePicker },
data() {
return {
time: null
};
}
};
</script>
to do that.
We changed the type prop to datetime .
We can also change the date picker to let us select a start and end date all at once.
So we can write:
<template>
<div>
<date-picker v-model="time" range></date-picker>
</div>
</template>
<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
export default {
components: { DatePicker },
data() {
return {
time: null
};
}
};
</script>
We used the range prop to do that.
It provides us with many other options like popup style, steps, day and time format, class names, and much more.
vue-virtual-scroll-list
vue-virtual-scroll-list lets us add a virtual scroll list to only render list items when they’re shown.
To use it, we first install it by running:
npm i vue-virtual-scroll-list
Then we can use it bu writing:
App.vue
<template>
<div>
<virtual-list
style="height: 360px; overflow-y: auto;"
:data-key="'uid'"
:data-sources="items"
:data-component="itemComponent"
:extra-props="{ otherPropValue: other }"
/>
</div>
</template>
<script>
import Item from "./components/Item";
import VirtualList from "vue-virtual-scroll-list";
export default {
name: "root",
data() {
return {
itemComponent: Item,
items: Array(1000)
.fill()
.map((a, i) => ({ uid: "1", text: `row ${i}` })),
other: "foo"
};
},
components: { "virtual-list": VirtualList }
};
</script>
components/Item.vue
<template>
<div class="hello">{{source.text}}</div>
</template>
<script>
export default {
props: ["source"]
};
</script>
We get the item to display from the source prop.
App has the virtua-list component to display the virtual scroll list.
otherPropValue is a prop that we pass to Item via the exta-props prop.
So we can write:
<template>
<div class="hello">{{source.text}} {{otherPropValue}}</div>
</template>
<script>
export default {
props: ["source", "otherPropValue"]
};
</script>
to get the other value.
Now only what’s displayed on the screen will be rendered.
This is handy for displaying big lists in a performant manner.
Conclusion
Vue Datetime Picker and vue2-datepicker let us add date pickers to our app.
vue-virtual-scroll-list is a library to lets us create virtual scroll lists, which lazyload items.
