light-vue-pikaday
v1.0.4
Published
A lightweight VueJs component wrapper for [Pikaday](https://github.com/Pikaday/Pikaday)
Downloads
2
Readme
About:
A lightweight VueJs component wrapper for Pikaday
Higly customizable Pikaday Vue Component
- Simple and Lightweight
- Dependencies: Pikaday and Moment.js
- Same configuration of Pikaday can be applied.
Install
You can install it via npm:
npm i light-vue-pikaday
Then where you want to use the pikaday, you should import and register the component.
import PikadayPicker from "light-vue-pikaday";
// register the component
components: {
PikadayPicker;
}
Then you can simply place the component where you want
<pikaday-picker value="2020-03-20"></pikaday-picker>
Example:
<template>
<div id="app">
<pikaday-picker :value="value" format="DD/MM/YYYY" :options="options"></pikaday-picker>
</div>
</template>
<script>
import PikadayPicker from "light-vue-pikaday";
export default {
name: "app",
data() {
return {
value: "08/03/1994",
options: {
disableWeekends: true,
yearRange: [1990, 2000]
}
};
},
components: {
PikadayPicker
}
};
</script>
Pikaday Component Props:
pikaday-picker
accepets the following props:
value
required
It's the default value of the date picker.
format
optional
default
: YYYY-MM-DD
Any Moment.js format can be used
options
optional
default
: {}
Object that can have any configuration that Pikaday has.
These are a list of configuration that you can pass, source: Pikaday
field
bind the datepicker to a form fieldtrigger
use a different element to trigger opening the datepicker, see [trigger example][] (default tofield
)bound
automatically show/hide the datepicker onfield
focus (defaulttrue
iffield
is set)ariaLabel
data-attribute on the input field with an aria assistance tekst (only applied whenbound
is set)position
preferred position of the datepicker relative to the form field, e.g.:top right
,bottom right
Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see positions example (default to 'bottom left')reposition
can be set to false to not reposition datepicker within the viewport, forcing it to take the configuredposition
(default: true)container
DOM node to render calendar into, see container example (default: undefined)formatStrict
the default flag for moment's strict date parsingtoString(date, format)
function which will be used for custom formatting. This function will take precedence overmoment
.parse(dateString, format)
function which will be used for parsing input string and getting a date object from it. This function will take precedence overmoment
.defaultDate
the initial date to view when first openedsetDefaultDate
Boolean (true/false). make thedefaultDate
the initial selected valuefirstDay
first day of the week (0: Sunday, 1: Monday, etc)minDate
the minimum/earliest date that can be selected (this should be a native Date object - e.g.new Date()
ormoment().toDate()
)maxDate
the maximum/latest date that can be selected (this should be a native Date object - e.g.new Date()
ormoment().toDate()
)disableWeekends
disallow selection of Saturdays or SundaysdisableDayFn
callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.yearRange
number of years either side (e.g.10
) or array of upper/lower range (e.g.[1900,2015]
)showWeekNumber
show the ISO week number at the head of the row (defaultfalse
)pickWholeWeek
select a whole week instead of a day (defaultfalse
)isRTL
reverse the calendar for right-to-left languagesi18n
language defaults for month and weekday names (see internationalization below)yearSuffix
additional text to append to the year in the titleshowMonthAfterYear
render the month after year in the title (defaultfalse
)showDaysInNextAndPreviousMonths
render days of the calendar grid that fall in the next or previous months (default: false)enableSelectionDaysInNextAndPreviousMonths
allows user to select date that is in the next or previous months (default: false)numberOfMonths
number of visible calendarsmainCalendar
whennumberOfMonths
is used, this will help you to choose where the main calendar will be (defaultleft
, can be set toright
). Only used for the first display or when a selected date is not already visibleevents
array of dates that you would like to differentiate from regular days (e.g.['Sat Jun 28 2017', 'Sun Jun 29 2017', 'Tue Jul 01 2017',]
)theme
define a classname that can be used as a hook for styling different themes, see [theme example][] (defaultnull
)blurFieldOnSelect
defines if the field is blurred when a date is selected (defaulttrue
)onSelect
callback function for when a date is selectedonOpen
callback function for when the picker becomes visibleonClose
callback function for when the picker is hiddenonDraw
callback function for when the picker draws a new monthkeyboardInput
enable keyboard input support (defaulttrue
)