@craydel/craydel-date-range-picker

CraydelDateRangePicker

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-date-range-picker

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelDateRangePicker from '@craydel/craydel-date-range-picker/src/CraydelDateRangePicker.vue'

const Components = {
  CraydelDateRangePicker,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

Name	Type	Default	Description
id	string	random ID	Sets the DOM id on the component.
placeholder	string	'Select range'	Sets the component's placeholder text.
hint	string	undefined	Hint text.
append-to-body	boolean	true	Appends the popup to body.
defaultValue	array	undefined	Sets the default date range.

 

Events

Name	Description
change	Change event is emitted only when both [from, to] are selected.

 

Usage

An example showing a date range picker.

<craydel-date-range-picker></craydel-date-range-picker>