Name: Top Vue Packages for Adding a Datetime Picker and Virtual Scrolling
Rating: 2.2 (7303 reviews)
Author: aumayeung

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

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.

The post Top Vue Packages for Adding a Datetime Picker and Virtual Scrolling appeared first on The Web Dev.