@craydel/craydel-date-picker

1.0.4 • Public • Published

CraydelDatePicker

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-date-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 CraydelDatePicker from '@craydel/craydel-date-picker/src/CraydelDatePicker.vue'

const Components = {
  CraydelDatePicker,
};

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 'DD/MM/YYYY' Sets the component's placeholder text.
is-required boolean false Puts component in a required state.
required-error string 'Field is required' Puts the component in an error state and passes through the custom required error message.
min string undefined Minimum allowed date/month (ISO 8601 format)
max string undefined Maximum allowed date/month (ISO 8601 format)
hint string undefined Hint text.
attach string undefined Specifies which DOM element that this component should detach to. String can be any valid querySelector. This will attach to the root v-app component by default.
no-validation boolean false Removes the validation styling from the component.
disabled boolean false Disables the component.

Events

Name Description
change Change event is emitted only when the day (for date pickers) or month (for month pickers) changes.

Usage

An example showing a date picker for a birthday, restricting dates range.

<craydel-date-picker
        placeholder="Date of birth"
        min="1950-01-01"
        :max="(new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substring(0, 10)"
></craydel-date-picker>

Package Sidebar

Install

npm i @craydel/craydel-date-picker

Weekly Downloads

0

Version

1.0.4

License

MIT

Unpacked Size

15.3 kB

Total Files

5

Last publish

Collaborators

  • sayedwasim