@tillhub/vue-date-picker

A date picker that allows user to select a range, quick pick dates, and select custom ranges

Install

npm install --save @tillhub/vue-date-picker

Demo

npm run serve

Usage

<template>
  <vue-date-picker
    locale="de"
    tintColor="#357ebd"
    buttonLabel="All Time"
    buttonWidth="auto"
    :hideDateInButton="false"
    :showTime="false"
    :initCustomToggle="true"
    @get-dates="printTheDate"/>
</template>

<script>

import VueDatePicker from '@tillhub/vue-date-picker'
import '@tillhub/vue-date-picker/dist/vue-date-picker.css'

export default {
  name: 'App',
  components: {
    VueDatePicker
  },
  methods: {
    printTheDate(selected){
      console.log("I gots the dates! ", selected)
    }
  },
}
</script>

Properties

The components accepts optional properties.

Property	type	required	example	default	description
locale	string	no	"de" or "en"	"en"	Currently only German and English is supported. Only 'de' and 'en '
tint-color	string	no	"#50e3c1"	"#357ebd"	This allows customized color of the highlighted date range on the calender
placement	string	no	right	bottom	The side of the button that the date picker will open from
button-label	string	no	"All Time"	"Select"	Customized Button Label to override default
button-width	string	no	"100px"	"auto"	Overrides the button width, but default it adjust to content
date-type	string	no	"iso" or "date"	"date"	Formats the get-dates (start/end) to either date format or ISO string format
date-format	string	no	"yyyy-MM-dd"	none	A valid date-fns token to format the dates instead of defaulting to the native toLocaleDateString. For the list of tokens see: https://date-fns.org/v2.9.0/docs/format
:hide-date-in-button	boolean	no	true	false	Overrides the applied date being showed in place of Button label
:show-time	boolean	no	false	true	Overrides the time being shown next to the date
:init=custom-toggle	boolean	no	false	true	Activates or de-activate Custom toggle at the bottom on initial open
:simple	boolean	no	true	false	This will only have the date-range calender select options
:clearable	boolean	no	true	false	An X icon will appear on the button that will clear date and return {} on @get-dates
:date-range	object	no	{ start: new Date(), end: "2018-11-13T23:00:00.000Z", showDateText: true }	true	Allows the date-range to be past in. The object must include a 'start' and 'end' key with a date value or an ISO sting. 'showDateText' (optional) must be a boolean and will over ride the button label and message above the calender to be the date range. It defaults to false
:default-short-cut	string	no	"thisMonth"	false	A valid shortcut string that matched with the existing date shortcuts, i.e. today, thisWeek, thisMonth, etc.

Event

The Date picker with only return the selected date from the component when the Applied button is clicked. It will return an object { start: new Date(), end: new Date()} with a start and an end key. The dates will be in a javascript date object see https://www.w3schools.com/js/js_dates.asp.

Event	type	example	default	description
@get-dates	function	(selected dates)=>{}	n/a	Passes the selected dates when the applied button is clicked and will return an object { start: new Date(), end: new Date(), showDateText: true}
@clear	function	()=>{}	n/a	When 'clearable' props is true, this event emits when the clear x is clicked

License

MIT © jmy-kellogg