Vue Dropdown Datepicker
A simple and customizable dropdown datepicker vue component.
Examples
CheckInstallation
vuejs is required to use this component
Package manager
npm
Usingnpm i vue-dropdown-datepicker
yarn
Usingyarn add vue-dropdown-datepicker
bower
Usingbower install vue-dropdown-datepicker
Using CDN
<script src="https://cdn.jsdelivr.net/npm/vue-dropdown-datepicker@1.3.1/dist/dropdown-datepicker.min.js"></script>
OR
<script src="https://unpkg.com/vue-dropdown-datepicker@1.3.1/dist/dropdown-datepicker.min.js"></script>
Usage
ES6
; el: '#app' components: DropdownDatepicker ;
Browser
el: '#app' components: DropdownDatepicker ;
Options
Option | Type | Defult | Comment |
---|---|---|---|
defaultDate | string | null | |
defaultDateFormat | string | 'yyyy-mm-dd' | |
displayFormat | string | 'dmy' | |
submitFormat | string | 'yyyy-mm-dd' | |
submitId | string | null | |
minAge | int | null | |
maxAge | int | null | |
minYear | int | null | |
maxYear | int | null | |
minDate | string | null | yyyy-mm-dd |
maxDate | string | null | yyyy-mm-dd |
allowPast | boolean | true | |
allowFuture | boolean | true | |
wrapperClass | string | 'date-dropdowns' | |
dropdownClass | string | null | |
daySuffixes | boolean | true | |
monthSuffixes | boolean | true | |
monthFormat | string | 'long' | |
required | boolean | false | |
dayLabel | string | 'Day | |
monthLabel | string | 'Month' | |
yearLabel | string | 'Year' | |
sortYear | string | 'desc' | |
monthLongValues | array | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] | |
monthShortValues | array | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |
initialDayMonthYearValues | array | ['Day', 'Month', 'Year'] | |
daySuffixValues | array | ['st', 'nd', 'rd', 'th'] |
Events
onDayChange
Call on any change of day dropdown
<dropdown-datepicker v-bind:on-day-change="yourFunctionName"><dropdown-datepicker>
onMonthChange
Call on any change of month dropdown
<dropdown-datepicker v-bind:on-month-change="yourFunctionName"><dropdown-datepicker>
onYearChange
Call on any change of year dropdown
<dropdown-datepicker v-bind:on-year-change="yourFunctionName"><dropdown-datepicker>
Contributing
Contributing Feel free to submit any fixes or propose any additional functionality via pull request or issue, making sure any changes take place in /src.
Minification and Validation Both are automated via npm command. Run npm install to install the required dependencies, then run npm run build from the root of the project to handle the tasks.