Top Vue Packages for Adding a Datetime Picker and Virtual Scrolling
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:28:35

---
title: Top Vue Packages for Adding a Datetime Picker and Virtual Scrolling
published: true
date: 2020-07-27 19:59:57 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-a-datetime-picker-and-virtual-scrolling/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-a-datetime-picker-and-virtual-scrolling
---

**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](https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-a-datetime-picker-and-virtual-scrolling/) appeared first on [The Web Dev](https://thewebdev.info).