Vue Nuxt Scroll Datepicker - Cashbac

In this article, we’ll look at how date and time picker and a virtual scroll. Fast, powerful and easy to use component datetime picker for Nuxt Vue.

Demo

See demo here

Requirements

• Vue CLI ^@vue/cli 4.5.11
• Vue Nuxt v2.14.12

Usage

Then we import the styles from the package in the component. 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.

npm install vue-scroll-datepicker-cashbac --save

<template>
  <div class="container">
    <div>
      <h1>
        Scroll Datepicter
      </h1>
      <scrolldatepicker 
        placeholder="May 28, 1989"
        v-model="dateBirth"
        :theme-color="'#CDCDCD'"
        :min="'1970-01-01'"
        :max="'2010-01-01'"
        :input-class="'vue-date-input'"
        :input-style="{color:'#333333'}"
      />
    </div>
  </div>
</template>

<script>
import scrolldatepicker from 'node_modules/vue-scroll-datepicker-cashbac/components/Scrolldatepicker';
export default {
  data() {
    return {
      dateBirth: '',
      dataGender: 'Female',
      dataName: ''
    };
  },
  components: {
    scrolldatepicker
  }
}
</script>

<style lang="scss">
  @import "node_modules/vue-scroll-datepicker-cashbac/assets/scrolldatepicker.scss";
</style>

Props:

| Name | Type | Default | Description | | --------------------- | ------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- | | v-model, value | String, Date, DateTime (luxon) | yyyy-LL-dd HH:mm:ss | Value | | value | String | null | Value | | max | String, Date, DateTime (luxon) | yyyy-LL-dd HH:mm:ss | Max date | | min | String, Date, DateTime (luxon) | yyyy-LL-dd HH:mm:ss | Min date
| placeholder | String | null | | inputClass | String | null | | inputStyle | String | null | | themeColor | String | null |

Events:

| Name | | --------------------- | | close | | open | | change-month | | change-year | | change-decade |

Methods:

| Name | Description | | --------------------- | --------------------- | | open | Open datetime picker | | close | Close datetime picker |

Development

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate