nuxt-streamline

A reusable component library for Nuxt apps

NsDatePicker

• A simple, standardized date picker component
• Extends vuejs-datepicker (https://github.com/charliekassel/vuejs-datepicker)
• Pre-configured with our preferred default options

Usage

<template>
  <div>
    <!--
    Wrap the date picker in <client-only> to prevent an
    error during server side render
    -->
    <client-only>
      <NsDatePicker v-model="myDate" />
    </client-only>
  </div>
</template>

<script>
import { NsDatePicker } from 'nuxt-streamline'

export default {
  components: {
    NsDatePicker,
  },
  data: () => ({
    myDate: '',
  }),
}
</script>

Props Available

All props available to vuejs-datepicker should be available for use with NsDatePicker. See https://github.com/charliekassel/vuejs-datepicker#available-props

Other props specific to NsDatePicker:

Props	Type	Default	Description
dayHeader	String	d	Represents the abbreviation format of the day headings in the datepicker (e.g. d="M", "T", "W" whereas ddd="Mon", "Tue", "Wed")