Categories
Top Vue Packages

Top Vue Packages for Adding a Datetime Picker and Virtual Scrolling

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.