DraggableCal
A datepicker Vue component. Compatible with Vue 2.x
Demo
Install
Usage
Available Languages
Dev & Build
Licence
Thanks
Demo
To view a demo online: demo
To view demo examples locally clone the repo and run npm i && npm serve –open App.vue
What the future holds
I am planning to add a few more customizations props in the near future, but I don’t let my lack of imagination/creativity stop yours ! I strongly encourage you ton open Issues or pull requests if you have any ideas/needs that you’d like to see added to the component !
Add more languages
Add props for easy custom styling
Add the possibility to append years as well
Optimize the Array of days rendered
Install
npm i vue-draggable-cal –save
or
yarn add vue-draggable-cal
import DraggableCal from ‘vue-draggable-cal’;
export default {
// …
components: {
DraggableCal,
},
// …
};
Or use directly from a CDN
<div id=”app“>
<DraggableCal></DraggableCal>
</div>
<script src=”https://unpkg.com/vue“></script>
<script src=”https://unpkg.com/vue-draggable-cal“></script>
<script>
new Vue({
el: ‘#app’,
components: {
DraggableCal,
}
})
</script>
Usage
<div class="highlight highlight-text-html-basic position-relative overflow-auto" data-snippet-clipboard-copy-content="<draggable-cal></draggable-cal>
<DraggableCal></DraggableCal>”>
<draggable-cal></draggable-cal>
<!– OR –>
<DraggableCal></DraggableCal>
Emits events
<DraggableCal @selectedDate=”doSomething($event)“></DraggableCal>
Available props
Prop
Type
Default
Description
days
Number
365
Number of days to append
months
Number
12
Numbers of months to append (has precedence over days if custom set)
years
Number
0
Number of years to append and enable year mode (see Demo )
prependedYears
Number
0
Number of years to preppend. Note: this prop is ignored if years is not set
prependedMonths
Number
1
Number of month to preppend
disabledWeekDays
Object
{}
Disable a specific week day by setting it’s day number to true. ie. {0: true} will disable sundays
disabledDates
Array
[]
Disable a specific date. Format of the day should be a string YYYY-MM-DD ie. [‘2018-01-01’]
pastIsDisabled
Boolean
true
Allows the selection of alreay past days and predend the days of prepended months
fullMonths
Boolean
false
Weither or not to always use complete months (i.e. days=1 if set to true the whole month is going to be appended)
accentColor
String
#00008b
Set the accent color (HEX or CSS color names)
lang
String
EN
Language (see available in Transations)
Events
These events are emitted on actions in the datepicker
Event
Output
Description
selectedDate
Object
A date has been selected. It outputs an object : formatedDate: String of the date andraw: An array of [YYYY, MM, DD] that can be used to build the date object via Date.UTC(YYYY,MM,DD)
dateCleared
null
The previously selected date has been unselected by the user
Available languages
Abbr
Language
EN
English
Default
FR
French
Dev & Build
Dev server
yarn serve # Or npm run serve
Build App
yarn build # Or npm run build
Build Lib
yarn bundle # Or npm run bundle
License
MIT
Thanks
Credits to @webAngelo for his range-calendar from which this is highly inspired.
GitHub
View Github