Warning
This library supports only vue2 and no longer maintained. Please check vue3-dropdown-datepicker
A simple and customizable dropdown datepicker vue component.
Check Examples
vuejs is required to use this component
Using npm
npm i vue-dropdown-datepicker
Using yarn
yarn add vue-dropdown-datepicker
Using bower
bower install vue-dropdown-datepicker
<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>
import DropdownDatepicker from '../src/dropdown-datepicker.vue';
new Vue({
el: '#app',
components: {
DropdownDatepicker
}
});
new Vue({
el: '#app',
components: {
DropdownDatepicker
}
});
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'] |
Call on any change of day dropdown
<dropdown-datepicker v-bind:on-day-change="yourFunctionName"></dropdown-datepicker>
Call on any change of month dropdown
<dropdown-datepicker v-bind:on-month-change="yourFunctionName"></dropdown-datepicker>
Call on any change of year dropdown
<dropdown-datepicker v-bind:on-year-change="yourFunctionName"></dropdown-datepicker>
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.